overflow-yプロパティの説明
CSSのoverflow-yプロパティは、要素から垂直方向にはみ出す内容の表示方法を指定します。例えば、高さが固定された包含ボックスに含まれる文字が多すぎて入り切らない場合に、それを溢れさせて全て表示するのか、切り取って隠すのかを選択できます。
オーバーフローは容器から内容が溢れ出すといった意味を持ちます。ウェブページにおけるオーバーフローには水平方向と垂直方向があり、本プロパティは縦の上下に溢れ出す内容の表示を制御します。
水平方向と垂直方向のオーバーフローを一括で指定する場合はoverflowを、水平方向のみの指定を行う場合はoverflow-xを使用してください。
overflow-yに指定できる値
visible- コンテンツ・エリアからはみ出す内容を、そのまま表示します。要素の寸法が変更できない場合は、コンテンツがボックスの外へ露出します。
auto- ブラウザの判定に従います。内容がコンテンツ・エリアに収まる場合は、
visibleと同じように振る舞いますが、新しいブロック整形コンテキストを生成します。内容が溢れる場合は、スクロールバーを表示します。 clip- コンテンツ・エリアからはみ出す内容を隠します。要素の寸法が変更できない場合は、コンテンツが切り取られて閲覧できなくなります。スクロールバーは表示されず、プログラム的にスクロースすることも拒否します。
hidden- コンテンツ・エリアからはみ出す内容を隠します。要素の寸法が変更できない場合は、コンテンツが切り取られて閲覧できなくなります。スクロールバーは表示されませんが、プログラム的にスクロースすることを許可します。
scroll- コンテンツはエリアからはみ出しませんが、ボックスにスクロールバーが表示され、閲覧できるようにします。印刷する場合は隠れた内容まで出力される可能性があります。
overflow-yの使い方とサンプルコード
overflow-yプロパティの構文は以下の通りです。
/* キーワード値 */
overflow-y: visible;
overflow-y: auto;
overflow-y: clip;
overflow-y: hidden;
overflow-y: scroll;
/* グローバル値 */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: unset;
overflow-yの実例
それでは実際にoverflow-yプロパティの書き方を見ていきましょう。以下の例は、高さを固定したコンテナの中に超過する内容を配置し、overflow-yの値を変更した時の比較です。
<section class="samp_box">
<div id="of_1">
<h2>overflow-y: visible;</h2>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
</div>
<div id="of_2">
<h2>overflow-y: hidden;</h2>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
</div>
<div id="of_3">
<h2>overflow-y: scroll;</h2>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
</div>
</section>
.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-y: visible;
}
#of_2 {
overflow-y: hidden;
}
#of_3 {
overflow-y: scroll;
}