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

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

overflow-x、overflow-yの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




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

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

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

{ overflow-x: 値; }

{ overflow-y: 値; }

値の指定方法

  • auto
  • visible
  • hidden
  • scroll
  • clip




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

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

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

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

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




コメントを残す

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