FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法

　スタイルシートでボックスの横幅や高さを指定すると、中身のコンテンツがボックスに収まらない場合がある。収まらないコンテンツをどのように表示するかは、overflowプロパティで指定することが可能だ。今回は、このoverflowプロパティを紹介したい。

　また、overflowに関連したoverflow-xやoverflow-y、text-overflowプロパティも紹介する。これらはInternet Explorerが独自拡張したプロパティだったが、CSS 3での採用が進むとともに他のブラウザでもサポートされるようになっている。

overflowプロパティ

　overflowはボックス内に収まらないコンテンツの表示方法を指定するプロパティだ。CSS 2から定義されているプロパティで、主要なブラウザであるFirefox、Safari、Opera、Internet Explorerはすべて対応している。

　たとえば、次のサンプルは見出しと文章を<div>で囲んでグループ化したものだ。<div>で構成するボックスの大きさは横幅を300ピクセルに、高さを150ピクセルに設定して、オレンジ色の罫線で囲んで表示している。すると、ボックス内に収まらないコンテンツは、ボックスから溢れる形で表示されることがわかる。

コンテンツがボックスから溢れた様子

div	{
	width: 300px;
	height: 150px;
	border: solid 1px orange;
	}

<div>
<h1>こんにちは</h1>

<p>文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。</p>

<p>文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。</p>
</div>

※ブラウザで表示を確認する

　このとき、<div>に対してoverflowプロパティを「hidden」と指定すると、ボックスから溢れたコンテンツを隠すことができる。しかし、隠れたコンテンツは閲覧できなくなってしまう。

overflowプロパティをhiddenと指定すると、溢れた部分を隠すことはできる

div	{
	overflow: hidden;
	width: 300px;
	height: 150px;
	border: solid 1px orange;
	}

※ブラウザで表示を確認する

　隠れたコンテンツも閲覧できるようにするには、overflowプロパティを「scroll」と指定する。これで、ボックスにはスクロールバーが表示され、コンテンツをスクロールして閲覧できるようになる。限られたスペースにコンテンツをレイアウトするのに便利だ。

scrollと指定することで、ボックスにスクロールバーが表示される

div	{
	overflow: scroll;
	width: 300px;
	height: 150px;
	border: solid 1px orange;
	}

※ブラウザで表示を確認する

　また、overflowプロパティを「auto」と指定すれば、必要な場合にだけスクロールバーを表示することができる。次のサンプルの場合、コンテンツが溢れているのは縦方向だけなので、ボックスの右側にだけスクロールバーが表示される。

autoと指定すると、必要な場合にのみスクロールバーを表示できる

div	{
	overflow: auto;
	width: 300px;
	height: 150px;
	border: solid 1px orange;
	}

※ブラウザで表示を確認する

　なお、overflowプロパティを「visible」と指定すれば、overflowプロパティを指定しなかったときと同じように、溢れたコンテンツをそのまま表示することが可能だ。

visibleと指定すると、溢れたコンテンツをそのまま表示できる

div	{
	overflow: visible;
	width: 300px;
	height: 150px;
	border: solid 1px orange;
	}

※ブラウザで表示を確認する