XHTML/CSS・トップ | CSSプロパティ・目次

●はみ出る部分を調整する

 overflowは要素の内容が要素の領域からはみ出たときにどのように表示させるかを決めるプロパティです。指定できる値には visible、hidden、scroll、autoがあります。適用できる要素はブロック要素、置換要素ですが、指定した値は子要素に継承しません。最新版のブラウザは対応していますが、scroll と autoの値はOper6でバグがあり、Mac版IE4、IE5もバグがあります。visibleはウィンドウズ版IE4.0〜6.0では効果がありません。バグがないのは hiddenだけです。

overflowプロパティの値の種類
説明
visible はみ出した要素をそのまま表示
hidden はみ出した内容を表示しない
scroll はみ出した部分にスクロールが付く
auto ブラウザに依存する。(一般的にはスクロールされる)

■サンプル1↓

 要素に幅と高さを指定し、かつ、overflowプロパティの値を追加指定し、領域からはみ出た場合の処理を指定します。ここでは overflowプロパティの値に hiddenと scrollを指定して解説します。バグのある場合がありますので、画像も配置してみます。二つのサンプルの違いは overflowプロパティの値だけです。

■サンプル2↓

 要素に幅と高さを指定し、かつ、overflowプロパティの値を追加指定し、領域からはみ出た場合の処理を指定します。ここでは overflowプロパティの値に hiddenと scrollを指定して解説します。バグのある場合がありますので、画像も配置してみます。二つのサンプルの違いは overflowプロパティの値だけです。


■画像↓

overflow: hidden;overflow: scroll;

【サンプル1のCSS】↓

.sample1 {
 overflow: hidden;
 height: 7em;
 width: 20em;
 padding: 0em;
 background-color: #fff;
 color:#000;
}

※直接関係のある書式は".sample1 { overflow: hidden; }"です。

【サンプル2のCSS】↓

.sample2 {
 overflow: scroll;
 height: 7em;
 width: 20em;
 padding: 0em;
 background-color: #fff;
 color:#000;
}

※直接関係のある書式は".sample2 { overflow: scroll; }"です。

【サンプル1のHTML】↓

<p class="sample1">文章省略</p>

【サンプル2のHTML】↓

<p class="sample2">文章省略</p>

XHTML/CSS・目次 | 配置と表示・目次

Copyright (C) 2006-2007 http://www.xml.vc/