CSSのoverflowプロパティとは？4つの値の違いと使い方を実例付きで解説

はみ出すコンテンツを適切に処理することは、質の高いWebデザインに欠かせない要素の一つです。

Webページ上の要素をデザインしていると、要素の中身がそのボックス内に収まりきらないケースに遭遇することがあります。そのまま放置すると、ページが意図しない形で表示されてしまうかもしれません。こうした問題を解決してくれるのが、CSSのoverflowプロパティです。

overflowプロパティは、要素のコンテンツがその境界内に収まらない場合の挙動を制御するために使われます。この記事では、具体的なコード例とともに、CSSのoverflowプロパティの使い方を詳しく解説します。

CSSのoverflowプロパティとは

overflowプロパティを使うと、コンテンツが割り当てられたスペースに収まりきらない場合に、その内容をどう表示するかを指定できます。

たとえば、段落テキストを表示するための<div>タグを定義したとします。この<div>は幅500px・高さ250pxしかありませんが、テキスト量が多すぎて指定された領域に収まらないとしましょう。

そんなときにoverflowプロパティを使えば、この問題に対処し、ユーザーの画面にコンテンツが正しく表示されるようにできます。overflowプロパティを適切に設定することで、Web要素内のコンテンツが崩れて表示されるリスクを減らせるのです。

overflowプロパティには、次の4つの値を指定できます。

• visible：はみ出した部分は切り取られず、要素のボックスの外側に表示されます。overflowプロパティの初期値です。
• scroll：はみ出した部分は切り取られ、残りのコンテンツを閲覧できるようにスクロールバーが表示されます。
• hidden：はみ出した部分は切り取られ、残りのコンテンツはユーザーから見えなくなります。
• auto：必要な場合にのみスクロールバーを追加し、残りのコンテンツを閲覧できるようにします。

なお、overflowプロパティを適用できるのは、「height」プロパティで明示的に高さが指定されたブロックレベル要素のみです。高さが固定されていない要素では、コンテンツに合わせてボックス自体が伸びるため、オーバーフローが発生しないからです。

CSS overflowの使用例

ここからは、overflowプロパティに指定できる各値について、実際のコード例を見ていきましょう。まずはoverflow: visibleから始めます。

visible（初期値）

visibleは、Web要素にデフォルトで設定されているoverflowの値です。visibleが指定された要素のはみ出し部分は切り取られず、コンテンツは要素のボックスの外側に表示されます。

たとえば、数行のテキストを含むボックスをデザインしていて、テキストがボックスより大きい場合にはみ出した部分をボックスの外側に表示したいとします。これを実現するコードは次のとおりです。

index.html

<div>これはテキストを含むボックスです。CSSのoverflowプロパティに「visible」を指定したときの挙動を説明するために使っています。</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: visible;
}

コードの内容を分解してみましょう。まず、幅200px・高さ100pxのボックスを作成し、背景色にライトグレーを指定しています。これらのスタイルはHTMLの<div>タグに適用されます。

さらに、overflow: visibleを指定することで、<div>タグ内のテキストが要素に収まらない場合、テキストが要素のボックスの外側に表示されるよう指示しています。結果として、一部のテキストがボックスからはみ出して表示されているのが分かります。

visibleの値は便利ですが、状況によっては他の値の方が適切な場合もあります。ほとんどの場合、要素のコンテンツがはみ出すことは望ましくありません。はみ出したコンテンツが、Webページ用に作成した他のスタイルと干渉してしまう可能性があるからです。

scroll

scrollの値を指定すると、Web要素からはみ出したコンテンツが切り取られ、代わりにスクロールバーが追加され、ユーザーが残りのコンテンツを閲覧できるようになります。

scrollを指定すると、必要かどうかに関係なく、縦横両方のスクロールバーが要素に追加される点に注意してください。

たとえば、ボックスをデザインしていて、はみ出したテキストをボックスの中に留めたいとします。はみ出したテキストがある場合はスクロールバーを表示し、ユーザーがボックス内をスクロールできるようにしたいわけです。そのコードは次のとおりです。

index.html

<div>これはテキストを含むボックスです。CSSのoverflowプロパティに「scroll」を指定したときの挙動を説明するために使っています。</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: scroll;
}

このコードでは、幅200px・高さ100px、背景色がライトグレーのボックスを作成しています。

さらに、overflowプロパティに「scroll」を指定しました。ボックスに入りきらないテキストが多いため、スクロールバーが表示され、はみ出したテキストもボックスの枠内に収まっているのが分かります。

auto

前のセクションで触れたとおり、scrollの値は、片方のスクロールバーが不要な場合でも、縦横両方のスクロールバーをWeb要素に追加します。

多くの場面で有用ですが、要素をデザインする際には、必要なスクロールバーだけを表示したいこともあるでしょう。そのような場合はautoの値を使います。

autoの値はscrollと似た動作をしますが、必要な場合にのみスクロールバーを追加する点が異なります。たとえば、テキストのボックスがあり、必要なときにだけスクロールバーを表示したいとしましょう。そのコードは次のとおりです。

index.html

<div>これはテキストを含むボックスです。CSSのoverflowプロパティに「auto」を指定したときの挙動を説明するために使っています。</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: auto;
}

上の例では、幅200px・高さ100px、背景色がライトグレーのボックスを作成し、overflowプロパティにautoを指定しています。最終的な表示結果を見ると、スクロールバーは1本だけ表示されています。これは、テキストボックス内のはみ出したコンテンツを表示するのに必要なスクロールバーが1本だけだからです。

hidden

要素からはみ出したコンテンツを切り取り、ユーザーから隠したい場合もあるでしょう。その場合は、hiddenの値を使用します。

たとえば、テキストのボックスがあり、要素の外側にはみ出したコンテンツを非表示にしたいとします。このボックスを作成するコードは次のとおりです。

index.html

<div>これはテキストを含むボックスです。CSSのoverflowプロパティに「hidden」を指定したときの挙動を説明するために使っています。</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: hidden;
}

これまでの例とは異なり、ボックスからはみ出したテキストはユーザーから見えなくなっています。これは、コード内でoverflowプロパティの値をhiddenに設定したためです。

overflow-xとoverflow-y

overflow-xプロパティとoverflow-yプロパティを使うと、コンテンツのはみ出し処理を軸ごとに個別に変更できます。

overflow-xプロパティはボックスの左右の端におけるはみ出しの処理方法を、overflow-yプロパティはボックスの上下の端におけるはみ出しの処理方法を、それぞれ指定します。

たとえば、ボックスをデザインしていて、x軸とy軸に異なるoverflowの値を設定したいとします。x軸にはhidden、y軸にはscrollを指定する場合、次のようなコードになります。

index.html

<div>これはテキストを含むボックスです。CSSのoverflow-xプロパティとoverflow-yプロパティを使って、Web要素の各軸に個別のoverflowの値を設定したときの挙動を説明するために使っています。</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow-x: hidden;
	overflow-y: scroll;
}

このボックスには水平方向のスクロールバーがありません。これはoverflow-xに「hidden」を指定したためです。一方、垂直方向のスクロールバーは表示されています。これはoverflow-yに「scroll」を指定したからです。

まとめ

CSSのoverflowプロパティは、要素のコンテンツがWebページ上の割り当てられた領域に収まりきらない場合に、その内容をどのように表示するかを指定するものです。

この記事では、具体例を挙げながら、CSSのoverflowプロパティとその4つの値を使って、Web要素のはみ出しを制御する方法を解説しました。これであなたも、熟練開発者のようにoverflowプロパティを使いこなせるはずです。