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