[CSS] スクロールバー付きの表示エリアを作成する（overflow）

2020年1月6日

スクロールバー付の表示エリアを作成するには、overflowを使用します。

overflowは、divタグや pタグなどに使用できます。

overflowの種類

overflowに指定できる値には以下４種類あります。

値	意味
scroll	表示する文字に係らず常にスクロールバーを表示する。
visible	表示する文字がはみ出てもスクロールバーを表示せずに そのまま表示する。（デフォルト）
hidden	表示する文字がはみ出たらその分は表示しない。
auto	表示する文字がはみ出た場合のみスクロールバーを表示する。

サンプル

例）表示する文字に係らず常にスクロールバーを表示する

文字が枠に収まっていますが、スクロールバーは表示されます。

例）文字がはみ出てもスクロールバーを表示しない（デフォルト）

文字が枠からはみ出ていますが、スクロールバーは出ずにそのまま表示されます。

例）表示する文字がはみ出たらその分は表示しない

文字が枠からはみ出ても、スクロールバーは表示されず枠からはみ出た分は表示されません。

例）表示する文字がはみ出た場合のみスクロールバーを表示する

表示する文字が横方向のみ枠からはみ出ているので、横スクロールバーのみ表示されます。

備考

• デフォルトでは文字がはみ出てもスクロールバーは表示されないので、スクロールバーを表示させたい場合は上記例のように明示的に指定する必要があります。