HTMLでスクロールバーを表示する方法を解説!

HTMLでスクロールバーを表示する方法を解説します。HTMLでスクロールバーを表示するにはCSSのoverflowプロパティを用います。横方向、縦方向それぞれにスクロールする方法についても紹介します。

コンテンツ [表示]

  1. 1HTMLでスクロールバーを表示したい
  2. 2HTMLでスクロールバーを表示する方法
  3. 2.1縦方向
  4. 2.2横方向
  5. 2.3縦方向と横方向ともにスクロールさせる方法
  6. 3まとめ

HTMLでスクロールバーを表示したい

HTMLでスクロールバーを表示させ、コンパクトに収めたいという時があります。

こんなときCSSのoverflowプロパティを用います。

では以降の項目でHTMLでスクロールバーを表示する方法について見ていきましょう。

Photo byStockSnap

HTMLでスクロールバーを表示する方法

ではHTMLでスクロールバーを表示する方法について解説します。

HTMLでスクロールバーを表示させるにはCSSのoverflowプロパティを用います。

縦方向

まず縦方向にスクロールする方法について見ていきましょう。

始めにサンプルコードを用いて、挙動を見てみましょう。

このようにoverflow: scroll;を用いれば、横方向には自動的に文字が折り返され、縦方向にスクロールされることが分かります。

横方向

次に横方向にのみスクロールされる方法について見ていきましょう。

ではまずサンプルコードを用いて、挙動を見てみましょう。

このように横方向にのみスクロールされていることが分かります。

ではコードの解説を行います。
まず横方向にスクロールされるために overflow-x: scroll;を設定します。

そして自動での折り返しを禁止するためにwhite-space: nowrap;を設定します。

最後に縦方向にはスクロールを禁止するため、overflow-y: hidden;を設定します。

これで横方向にのみスクロールされます。

縦方向と横方向ともにスクロールさせる方法

最後に縦方向と横方向ともにスクロールさせる方法について紹介します。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように横方向と縦方向ともにスクロールされていることが分かります。

ではコードの解説を行います。

overflow: scroll;だけだと横方向には自動的に折り返され、スクロールされません。
なので横方向に自動的に折り返されるのを禁止すると、横方向にもスクロールされることが分かります。

そこでwhite-space: nowrap;を設定します。

これで横方向にも縦方向にもスクロールされます。

まとめ

いかがでしたでしょうか?

スクロールバーを表示させることで、長い文章をコンパクトに表示させることができます。
またスクロールバーは表示・非表示を切り替えることも可能です。

非表示にする方法は以下の記事を参照してください。

以下の記事もふまえて、ぜひスクロールバーを使ってみてください。

あわせて読みたい
HTMLでスクロールバーを非表示にする方法を解説!のイメージ
HTMLでスクロールバーを非表示にする方法を解説!
HTMLでスクロールバーを非表示にする方法を解説します。スクロールバーを非表示にしてデザイン的によくしたいということがあります。ここではCSSを用いてスクロールバーを非表示にさせる方法を解説します。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次