HTMLでスクロールバー付きのボックスを設定する方法

Webページの中でスクロールさせたい領域を作りたいということがあると思います。

サイトの最新の更新履歴を残す場合などは、スクロールできたほうが便利だと思います。Webページをスクロールさせる時、昔はframe等を用いたりiframeを使用したりして実現していました。

しかし、frameやiframeを使うとHTMLを複数用意しなければならず、何かと面倒でした。

今回はそれ以外の実現方法として、CSSでoverflow scrollをご紹介します。CSSで書くことにより、HTMLを分割することがなくなるためファイルの分散を抑えることができます。

overflow: scroll;

要素の中をスクロールさせる時は、先ず縦と横の長さを固定します。固定した後overflowにscrollを指定することでスクロールボックスを設定します。

下の例はdiv属性の中身をスクロールさせる例です。

上の例のようにscrollを指定することで、ボックス内でスクロールできることが確認できると思います。

autoを指定することでもスクロールを表示させることはできますが、この場合は縦方向のみのスクロールが表示されます。縦横のスクロールを表示させたい場合は今回ご紹介した方法を参考にしてみてください。