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

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

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

overflowの種類

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

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

サンプル

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

ABCDE ABCDE

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

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

ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ

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

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

ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ

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

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

ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ

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

備考

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

コメント

タイトルとURLをコピーしました