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

1.overflow-x、overflow-yとは?

overflow-x、overflow-yプロパティはボックスに収まらない内容の水平方向、垂直方向の表示方法を指定します。

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

{ overflow-x: 値; }

{ overflow-y: 値; }

値の指定方法

2.overflow-x、overflow-yの使い方

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

以下のようにすることで常にスクロールバーを表示させることができます。

.box {
 border: 1px solid black;
 width: 250px;
 margin-bottom: 12px;
 overflow-x: scroll;
}

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