
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{ width: 300px; height: 150px; border: solid 1px orange; }
こんにちは
文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。
文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。
※ブラウザで表示を確認する
このとき、

div{ overflow: hidden; width: 300px; height: 150px; border: solid 1px orange; }
※ブラウザで表示を確認する
隠れたコンテンツも閲覧できるようにするには、overflowプロパティを「scroll」と指定する。これで、ボックスにはスクロールバーが表示され、コンテンツをスクロールして閲覧できるようになる。限られたスペースにコンテンツをレイアウトするのに便利だ。

div{ overflow: scroll; width: 300px; height: 150px; border: solid 1px orange; }
※ブラウザで表示を確認する
また、overflowプロパティを「auto」と指定すれば、必要な場合にだけスクロールバーを表示することができる。次のサンプルの場合、コンテンツが溢れているのは縦方向だけなので、ボックスの右側にだけスクロールバーが表示される。

div{ overflow: auto; width: 300px; height: 150px; border: solid 1px orange; }
※ブラウザで表示を確認する
なお、overflowプロパティを「visible」と指定すれば、overflowプロパティを指定しなかったときと同じように、溢れたコンテンツをそのまま表示することが可能だ。

div{ overflow: visible; width: 300px; height: 150px; border: solid 1px orange; }
※ブラウザで表示を確認する
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]