Title

overflowとは

ここで説明するoverflow とは次の語句からなるCSSのプロパティです。

overflow

読み: オーバーフロー
意味: あふれる、こぼれる

目次に戻る

overflowプロパティの概要

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

これは要素のコンテンツがブロック整形コンテキストから溢れて収まりきらない場合、どのようにコンテンツを表示するかを設定できるということです。

overflowプロパティは下記の個別プロパティを一括で設定するための総合プロパティです。

• overflow-x: 水平軸の表示方法
• overflow-y: 垂直軸の表示方法

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{overflow: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

下記のサンプルにはdiv要素を使用します。 このdiv要素にはコンテンツが要素の外にはみ出すように、予め横幅と高さを100pxに設定しています。

div{
	width: 100px;
	height: 100px;
}

目次に戻る

初期値: visible

初期値のvisibleは「明らかに見てわかる」という意味でです。 このキーワードを使うと、 そのボックス内に留めることができずはみ出した内容は要素の外側に表示されます。

div{
	width: 100px;
	height: 100px;
	overflow: visible
}

目次に戻る

キーワード値: hidden

hiddenキワードは、「隠れた」という意味です。 このキーワードを使うと、 ボックスに収まりきらない内容は切り取られ、スクロールバーも表示されません。

div{
	width: 100px;
	height: 100px;
	overflow: hidden;
}

目次に戻る

キーワード値: scroll

scrollキーワードは、「巻物」という意味です。 このキーワードを使うと、 ボックスのサイズに合わせて内容が切り取られますが、コンテンツに関係なく常にスクロールバーが表示されるので内容を見ることは可能です。

div{
	width: 100px;
	height: 100px;
	overflow: scroll;
}

目次に戻る

キーワード値: auto

autoキワードは「自動」という意味です。 ブラウザーのレンダリングに依存しますが、 このキーワードを使うと、ボックスに内容が収まる場合にはvisibleキーワードを使用した場合と同じように表示され、 内容が溢れる場合には自動でスクロールバーが表示されます。

div{
	width: 100px;
	height: 100px;
	overflow: auto;
}

目次に戻る

個別: overflow-x: scroll

ここでは個別プロパティの overflow-x について簡単に触れておきます。 これは要素の横軸に対してのみoverflowの設定をしたことになります。 サンプルはキーワード値のscrollを個別指定した場合です。 結果は、このように水平方向にスクロールバーが表示されます。

div{
	width: 100px;
	height: fit-content
	overflow-x: scroll;
}

目次に戻る

個別: overflow-y: scroll

ここでは個別プロパティの overflow-y について簡単に触れておきます。 これは要素の縦軸に対してのみoverflowの設定をしたことになります。 サンプルはキーワード値のscrollを個別指定した場合です。 結果は、このように垂直方向にスクロールバーが表示されます。

なお、垂直方向のスクロールバーのみを表示させるためには、 overflow-wrap を使ってテキストの折り返しも設定してください。

div{
	width: 100px;
	height: 100px
	overflow-wrap: break-word;
	overflow-y: scroll;
}

目次に戻る

グローバル値

overflowプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のvisibleに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{overflow: グローバル値;}

目次に戻る

補足説明

• ブロックレベル要素、非置き換えインラインブロック要素、テーブルセルに適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

overflow: visible

overflow: hidden;

overflow: scroll;

overflow: auto;

目次に戻る