2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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

overflowの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.overflowとは?

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

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

{ overflow: 値; }

値の指定方法

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

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

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

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




2.overflowの使い方

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

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

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

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です