要素のはみ出し（オーバーフロー）

CSS のすべてがボックスであり、 width と height（または inline-size や block-size）の値を与えることにより、これらのボックスのサイズを制御できることを見てきました。オーバーフローはボックス内のコンテンツが多すぎる場合に発生し、快適に収まらないという状態です。CSS はこのオーバーフローを管理するためのさまざまなツールを提供しますが、早めに理解しておくと役立つ概念でもあります。CSS を書いていると、とりわけ CSS によるレイアウトを深く理解していくにつれ、オーバーフローによく出くわします。

オーバーフローが発生した場合の CSS の既定の動作を示す 2 つの例を見てみましょう。

1 つめの例です。まずブロックに height でボックスの高さを制限します。そしてそのスペースよりも多くのコンテンツを追加します。コンテンツはボックスからはみ出し、下の段落にかぶさってしまいます。

2 つめに、インラインとして制限されているボックス内の単語の例です。ボックスは単語が収まらないほど小さいため、ボックスからはみ出てしまいます。

CSS のこの既定のアプローチは、コンテンツをかなり乱雑にオーバーフローさせているように感じられるかもしれません。追加のコンテンツを非表示にしたり、ボックスを大きくさせたりしないのはなぜなのでしょう。

CSS は可能な限りコンテンツを隠しません。これをやってしまうと、通常は問題となりうるデータ損失が発生するためです。CSS はこのようにコンテンツが消えることを懸念します。コンテンツが消失したことに気付かない可能性があるのは問題だからです。見ている人は消えたことに気付かないかもしれません。フォーム上の送信ボタンが消えてしまい、フォームが完了できない場合それは大きな問題です。代わりに CSS は目に見える方法でオーバーフローしようとします。あなたもしくは訪問者がコンテンツが重なっているという状況に気づき、修正が必要であることを知ることができます。

ボックスを width または height で制御している場合、CSS はオーバーフローの可能性が管理されていると想定します。一般にボックスにテキストがある場合、ブロックのサイズを制御することは問題になりがちです。例えば、想定していたよりも多くのテキストになってしまったか、フォントサイズを大きくした場合などです。

次のいくつかのレッスンでは、オーバーフローを起こしにくいサイズ調整方法を見ていきます。固定サイズが必要な場合は、オーバーフローの動作を制御することもできます。読み進めましょう。

overflow プロパティは、要素のコンテンツのはみ出しを管理するのに役立ちます。このプロパティを使用すると、はみ出したコンテンツをどのように処理すべきかをブラウザーに伝えることができます。 <overflow> の値型の既定値は visible です。この既定の設定、コンテンツがオーバーフローしたときに、そのコンテンツを見ることができます。

オーバーフロー時にコンテンツを切り取りたい場合、 overflow: hidden をボックスに指定します。これは文字通り、はみ出たものを見えなくします。これにより内容が隠れてしまうことが起こりうるため、コンテンツが非表示になっても問題にならない場合にのみに限定した方がいいでしょう。

コンテンツのオーバーフロー時にスクロールバーを表示したいこともあるでしょう。 overflow: scroll を指定すればコンテンツがオーバーフローしない場合でも、ブラウザーはスクロールバーを表示します。コンテンツに応じてスクロールバーが表示されたり消えたりするのを防ぐため、これが必要な場合があります。

下記のボックスから一部のコンテンツを除去してください。スクロールする必要がなくても、スクロールバーが残っていることに注目してください。

上記の例では y 軸のスクロールバーだけがあればいいのですが、横スクロールバーも表示されてしまいます。 overflow-y プロパティを使えば、y 軸のみのスクロールバーを指定できます。

overflow-x を使用して、x 軸のみのスクロールバーを表示できますが、文字が見切れてしまうことの回避策としては推奨されません。小さなボックスで長い文字列を処理する場合は、word-break や overflow-wrap を検討してください。CSS によるサイズ設定 で説明した方法のいくつかは、さまざまな量のコンテンツに適切に対応するボックスを作成するのに役立つ場合があります。

scroll にしておけばコンテンツが少ないとしても、それとは関係なくスクロールバーは常に表示されます。

コンテンツがボックスに収まらない場合にのみ、スクロールバーを表示する場合は overflow: auto を使用します。この場合、スクロールバーを表示するかどうかはブラウザーによります。

以下の例では、ボックスに収まるまでコンテンツを削除していくとスクロールバーが消えます。

<overflow> の値に scroll または auto を使用すると、ブロック整形コンテキスト (BFC = Block Formatting Context) を生成します。これは、これらの overflow 値を持つ要素ボックスのコンテンツが自己完結したレイアウトになることを意味しています。このような要素ボックスの外側にあるコンテンツは要素ボックスの中に入り込むことはできず、要素ボックスから周囲のレイアウトに入り込むことはできません。スクロールの使い勝手を一貫したものにするために、ボックスのコンテンツをすべて収め、重ならないようにする必要があるためです。

モダンなレイアウト手法（CSS レイアウト モジュールで説明）では、オーバーフローを管理します。これらの方法は、ウェブページ上にどれだけのコンテンツが存在するかについての仮定や依存関係なしに大きく機能します。

これは常にそうだったわけではありません。かつては、箱の底辺を揃えるために高さの固定されたコンテナーで作られた現場もありました。そうでなければ、これらの箱はお互いに何の関係も持たなかったかもしれません。これは脆弱でした。古いアプリケーションで、コンテンツがページ上の他のコンテンツに重なっているボックスに遭遇した場合、これでオーバーフローで発生することを認識できるでしょう。理想的には、レイアウトをリファクタリングして、修正された高さのコンテナーに頼らないようにすることです。

サイトを開発するときは、常にオーバーフローの問題に留意する必要があります。大量のコンテンツと少量のコンテンツを含むデザインをテストし、テキストのフォントサイズを大きくし、CSS が堅牢に対処できていると確認する必要があります。オーバーフローの値を変更してコンテンツを非表示にしたりスクロールバーを追加したりするのは、特別な場合（例えばスクロールが本当に必要な場合など）にのみ使うべきです。

この記事の終わりまで来ましたが、最も重要な情報を覚えていますか？次に進む前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります。スキルテスト: オーバーフローを見てください。

この短いレッスンではオーバーフローの概念を紹介しました。CSS はオーバーフローしたコンテンツが見えなくなることによる、データ損失の回避を試みることを理解しました。潜在的なオーバーフローを管理できること、また、問題のあるオーバーフローを引き起こしてしまわないかを確認する必要があることもわかりました。

次の記事では、 CSS の中で最も一般的な値と単位を見ていきます。

• 前のページ
• Overview: CSS の構成要素
• 次のページ