【CSS】サイト内の要素に縦スクロールを実装する方法

2020-01-022020-04-08

今回は、Webサイト内の特定の要素に縦スクロールを実装する方法を記載していいきます。

使用するケース

お問い合わせページの「個人情報保護方針」などのように、「長い文章を記載する必要があるが、画面の幅を大きく取りたくない」場合に使われることが多いです。

ページトップの新着情報の部分で使われることもありますね。

一定のスペース内に情報を集約できるメリットがあります。

サンプル

方法

CSSにて、下記のようにスクロールを入れたい要素に「overflow-y: scroll」を記述することで実装が可能です。

またその際に、heightで要素の高さを設定することが必要となります。

div{
  overflow-y:scroll;
  height:100px;
}

説明

overflow-y
については、特定の要素の子要素が親要素の高さからはみだした場合の処理を設定できるプロパティです。

scroll
を設定することで、はみだした分はスクロールにより表示されるように設定ができます。

以上となります。