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;
}
こんにちは
文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。
文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。
※ブラウザで表示を確認する
このとき、
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;
}
※ブラウザで表示を確認する
- ホワイトペーパー
セキュリティでブランド価値を向上
データ爆発に備える"無限の可能性"
日立の新サーバに見る、日立の本気
クラウド意識調査結果を公開
企業情報セキュリティもオラクル！
スマートデバイスに忍び寄る危機！
物理→VDI環境移行「3つの罠」とは
百聞は一見で！日立のビッグデータ
