[CSS] overflowプロパティでボックスに収まらない内容の表示方法をまとめて指定しよう!

1.overflowとは?

overflowプロパティはボックスに収まらない内容の表示方法をまとめて指定します。

値の指定方法は以下の通りです。

{ overflow: 値; }

値の指定方法

個別指定の各プロパティと同じです。

値は半角スペースで区切り、2つまで指定できます。

1つ目は水平方向に2つ目は垂直方向に適用されます

1つだけ指定した場合、水平方向・垂直方向に同じ値が適用されます。

2.overflowの使い方

それではoverflowの使い方をみていきましょう。

以下のようにすることでボックスに収まらない内容はスクロールバーを操作して表示できます。

.box {
 border: 1px solid black;
 width: 250px;
 height: 250px;
 overflow: auto;
}

他にも値を設定できるのでいろいろと試してみることをオススメします!