コンテンツのオーバーフロー

オーバーフローとは

CSS のすべてがボックスであり、 width と height の値を与えることにより、これらのボックスのサイズを制御できることを見てきました。オーバーフローはボックス内のコンテンツが多すぎる場合に発生します。 CSS はこのオーバーフローを管理するためのさまざまなツールを提供しています。今後、CSS のレイアウトを使用して CSS を書いていると、オーバーフローによく出くわすようになるでしょう。

CSS は「データ損失」を回避しようとする

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

最初の例では、height の設定により制限されたボックスが特徴的です。ボックスのコンテンツが利用できる空間を超えているため、コンテンツはボックスからはみ出し、下の段落にかぶさってしまいます。

<div class="box">
   このボックスには高さと幅が設定されています。つまり、割り当てられている高さ以内に表示しきれないほどのコンテンツがある場合、オーバーフローがあるということを意味しています。 overflow が hidden に設定されている場合は、あふれた部分は表示されません。
</div>

<p>これはボックスの外のコンテンツです。</p>

.box {
  border: 1px solid #333333;
  width: 250px;
  height: 100px;
}

2 つ目の例は、ボックス内の単語に注目してください。ボックスは単語が収まらないほど小さいため、ボックスからはみ出てしまいます。

<div class="word">Overflow</div>

.word {
  border: 1px solid #333333;
  width: 100px;
  font-size: 250%;
}

なぜ CSS はこのような乱雑な方法で動作し、意図するコンテナーからコンテンツをはみ出させて表示するのか不思議に思うかもしれません。追加のコンテンツを非表示にしたり、ボックスを大きくさせたりしないのはなぜなのでしょう。

可能な限り、CSS はコンテンツを非表示にしません。これはデータ損失を引き起こすためです。データ損失の問題点は、あなたやウェブサイトの訪問者が気づかない可能性があることです。例えば、フォームの送信ボタンが隠れてしまい、誰もフォームを完成させられなくなると、これは大きな問題になり得ます。代わりに、CSS は可視的な方法でオーバーフローします。これにより、問題があることに気づきやすくなります。最悪の場合でも、サイト訪問者がコンテンツが重なっていることを知らせてくれるでしょう。

ボックスを width や height で制限する場合、 CSS はあなたが何をしているか分かっていると信じています。 CSS は、あなたがオーバーフローの可能性を管理していることを想定しています。一般に、ブロックの寸法を制限することは、ボックスにテキストが格納されている場合に問題となります。サイトの設計時に想定していたよりもテキストが多かったり、テキストが大きかったりする場合があります（例えば、ユーザーがフォントサイズを大きくしている場合など）。

overflow プロパティ

overflow プロパティは、ブラウザがオーバーフローするコンテンツをどのように処理すべきかを指定することができます。<overflow> 値型のデフォルト値は visible です。このデフォルト設定では、コンテンツがオーバーフローしても見ることが可能です。

オーバーフローするコンテンツを隠す

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

<div class="box">
   このボックスには高さと幅が設定されています。つまり、割り当てられている高さ以内に表示しきれないほどのコンテンツがある場合、オーバーフローがあるということを意味しています。 overflow が hidden に設定されている場合は、あふれた部分は表示されません。
</div>

<p>これはボックスの外のコンテンツです。</p>

.box {
  border: 1px solid #333333;
  width: 250px;
  height: 100px;
  overflow: hidden;
}

上記の例を編集して、overflow の値を visible に設定し、それからまた hidden に戻して、 どんな効果があるのか見てみましょう。

オーバーフローするコンテンツをスクロールする

代わりに、ユーザーがコンテンツをスクロールしてすべてを閲覧することができるようにしたいのではないでしょうか？ あふれたコンテンツに overflow: scroll を設定すると、スクロールバーが表示可能なブラウザーでは、たとえあふれるほどのコンテンツがなくても、常にスクロールバーを表示させます。これにより、コンテナー内のコンテンツの量に応じてスクロールバーが現れたり消えたりする代わりに、レイアウトを一定に保つことができるという利点があります。

実際に見てみましょう。次の例を編集して、box の <div> 内のコンテンツを一部削除するよう編集してみてください。スクロールする必要がある場合であっても、スクロールバーが残っていることに注意してください。

<div class="box">
   このボックスには高さと幅が設定されています。つまり、割り当てられている高さ以内に表示しきれないほどのコンテンツがある場合、オーバーフローがあるということを意味しています。 overflow が hidden に設定されている場合は、あふれた部分は表示されません。
</div>

<p>これはボックスの外のコンテンツです。</p>

.box {
  border: 1px solid #333333;
  width: 250px;
  height: 100px;
  overflow: scroll;
}

上記の例では y 軸のスクロールバーだけがあればいいのですが、両方の軸のスクロールバーが表示されてしまいます。 y 軸のみをスクロールさせたいのであれば、 overflow-y プロパティを使用して overflow-y: scroll と設定することができます。

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

<div class="word">Overflow</div>

.word {
  border: 5px solid #333333;
  width: 100px;
  font-size: 250%;
  overflow-x: scroll;
}

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

スクロールバーを必要な場合だけ表示する

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

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

<div class="box">
   このボックスには高さと幅が設定されています。つまり、割り当てられている高さ以内に表示しきれないほどのコンテンツがある場合、オーバーフローがあるということを意味しています。 overflow が hidden に設定されている場合は、あふれた部分は表示されません。
</div>

<p>これはボックスの外のコンテンツです。</p>

.box {
  border: 1px solid #333333;
  width: 250px;
  height: 100px;
  overflow: auto;
}

ウェブデザインでの望ましくないオーバーフロー

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

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

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

まとめ

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

次の記事では、オーバーフローに関する情報を理解し、定着したかどうかを調べるために使用できる検査をいくつか提供します。

• 前のページ
• Overview: CSS によるスタイル設定の基本
• 次のページ