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;
サンプル: ブロック要素 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ