【CSS入門】overflowプロパティの使い方

overflowプロパティの基本的な使い方について書きます。overflowプロパティは、要素の内容が表示領域に収まらない場合に、はみ出した部分をどのように表示するのかを指定するプロパティです。具体的な書き方は、サンプルコードを確認してください。

記述の仕方

/* 記述例 */
セレクタ名{ overflow: 値; }
セレクタ名{ overflow: x軸方向の値 y軸方向の値; }

セレクタ名{ overflow-x: 値; } /* x軸(横)方向の指定 */
セレクタ名{ overflow-y: 値; } /* y軸(縦)方向の指定 */

overflowプロパティの基本情報

指定できる値の説明です。

• visible
  • 表示領域からはみ出して表示される
• hidden
  • 表示領域に収まらない部分は、非表示になる
• scroll
  • 内容が表示領域に収まらない場合は、スクロールバーが表示される
• auto
  • どのように表示されるかは、ユーザーエージェントに依存する

サンプルコード

共通のスタイルを.boxにまとめて、overflowプロパティの指定を切り出しています。

<p class="box sample1">overflowプロパティの表示例です。visibleを指定しています。</p>
<p class="box sample2">overflowプロパティの表示例です。hiddenを指定しています。</p>
<p class="box sample3">overflowプロパティの表示例です。scrollを指定しています。</p>
<p class="box sample4">overflowプロパティの表示例です。autoを指定しています。</p>
<p class="box sample5">overflow-xプロパティの表示例です。scrollを指定しています。</p>
<p class="box sample6">overflow-yプロパティの表示例です。scrollを指定しています。</p>

/* 共通のスタイル */
.box{
  border:solid 1px #333333;
  padding:10px;
  width:200px;
  height:50px;
}

.sample1{ overflow:visible; }
.sample2{ overflow:hidden; }
.sample3{ overflow:scroll; }
.sample4{ overflow:auto; }
.sample5{ overflow-x:scroll; }
.sample6{ overflow-y:scroll; }

表示例

overflowプロパティの表示例です。visibleを指定しています。

overflowプロパティの表示例です。hiddenを指定しています。

overflowプロパティの表示例です。scrollを指定しています。

overflowプロパティの表示例です。autoを指定しています。

overflow-xプロパティの表示例です。scrollを指定しています。

overflow-yプロパティの表示例です。scrollを指定しています。

まとめ

overflowプロパティの基本的な使い方について書きました。利用規約やカルーセルパネルを作るときに利用します。使う場面が少ないかもしれませんが、このようなプロパティがあることを知っておくのも良いです。