overflow:要素からはみ出した内容の表示方法を指定する
初期値 | visible |
適用対象 | コンテナ要素 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
overflowプロパティの説明
overflow
は、要素からはみ出した内容の表示方法を指定します。例えば、幅や高さが決まった包含ボックスに含まれる文字が多すぎて入り切らない場合に、それを溢れさせて全て表示するのか、切り取って隠すのかを選択できるようになります。
上記のような状態をオーバーフローと言います。オーバーフローは容器から内容が溢れ出るといった意味を持ちます。オーバーフローは画面の小さいスマートフォンで起こりやすい現象です。特に、パソコン用の画面と共通のソースコードで表示するレスポンシブ・デザインのサイトで気にかける必要があるでしょう。
overflow
は、水平方向と垂直方向の制御を一括で行うショートハンド・プロパティです。個別に制御する場合は以下のプロパティを使用します。
overflow-x
:水平軸のオーバーフローoverflow-y
:垂直軸のオーバーフロー
overflowに指定できる値
- visible
- コンテンツ・エリアからはみ出す内容を、そのまま表示します。要素の寸法が変更できない場合は、コンテンツがボックスの外へ露出します。
- auto
- ブラウザの判定に従います。内容がコンテンツ・エリアに収まる場合は、
visible
と同じように振る舞いますが、新しいブロック整形コンテキストを生成します。内容が溢れる場合は、スクロールバーを表示します。 - clip
- コンテンツ・エリアからはみ出す内容を隠します。要素の寸法が変更できない場合は、コンテンツが切り取られて閲覧できなくなります。スクロールバーは表示されず、プログラム的にスクロースすることも拒否します。
- hidden
- コンテンツ・エリアからはみ出す内容を隠します。要素の寸法が変更できない場合は、コンテンツが切り取られて閲覧できなくなります。スクロールバーは表示されませんが、プログラム的にスクロースすることを許可します。
- scroll
- コンテンツはエリアからはみ出しませんが、ボックスにスクロールバーが表示され、閲覧できるようにします。印刷する場合は隠れた内容まで出力される可能性があります。
overflowの使い方とサンプル
overflow
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
overflow: visible;
overflow: auto;
overflow: clip;
overflow: hidden;
overflow: scroll;
/* 水平方向 | 垂直方向 */
overflow: hidden scroll;
/* グローバル値 */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: unset;
overflowの実例
それでは実際にoverflow
プロパティの書き方を見ていきましょう。以下の例は、高さを制限したコンテナの中に超過する内容を配置し、overflow
の値を変更した時の比較です。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 0 1rem 5rem;
background-color: #eee;
display: grid;
grid-template: 150px / 1fr 1fr 1fr;
gap: 1rem;
resize: horizontal;
}
.samp_box div {
margin: 1rem 0 0;
padding: .5rem;
border: 1px solid #999;
background-color: #fff;
}
div h2 {
margin: 0;
font-size: 1rem;
}
div p {
margin: .5rem 0 0;
}
#of_1 {
overflow: visible;
}
#of_2 {
overflow: hidden;
}
#of_3 {
overflow: scroll;
}
HTML
<section class="samp_box">
<div id="of_1">
<h2>overflow: visible;</h2>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
</div>
<div id="of_2">
<h2>overflow: hidden;</h2>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
</div>
<div id="of_3">
<h2>overflow: scroll;</h2>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
</div>
</section>
overflowに関連するCSSプロパティ
要素の表示や配置方法 | |
---|---|
bottom | 位置指定で配置された要素の底辺からの距離を指定する |
break-after | ボックスの終了時にページやカラムをどのように区切るかを指定する |
break-before | ボックスの開始前にページやカラムをどのように区切るかを指定する |
break-inside | ボックスの途中でページやカラムをどのように区切るかを指定する |
clear | フロート(float)の回り込みを解除する |
clip | 要素を切り抜いて可視化する範囲を指定する |
box-decoration-break | 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する |
display | 要素の表示形式を指定する |
float | 要素を右または左へ寄せて配置する |
image-orientation | 横向きや逆さまに撮影された写真を正しい向きに回転させる |
image-rendering | 画像を拡大縮小するアルゴリズムを設定する |
left | 位置指定で配置された要素の左辺からの距離を指定する |
object-fit | 画像や動画などの置換要素をボックスに収める方法を指定する |
object-position | ボックスの中に配置されるオブジェクトの位置を指定する |
overflow | 要素からはみ出した内容の表示方法をまとめて指定する |
overflow-wrap | インライン要素に対して溢れる単語の折り返し方法を指定する |
overflow-x | 要素から水平方向にはみ出す内容の表示方法を指定する |
overflow-y | 要素から垂直方向にはみ出す内容の表示方法を指定する |
position | 要素の位置指定の種類を変更する |
right | 位置指定で配置された要素の右辺からの距離を指定する |
vertical-align | インライン要素や表のセルに対して縦方向の揃える位置を指定する |
visibility | 要素の領域を残したまま表示・非表示を切り替える |
z-index | 要素の重なり順序を指定する |