overflow: ***;
| ブラウザ |
|
|---|---|
| プロパティ |
overflow は、領域内に収まりきらない内容を、どのように処理するかを指定するプロパティです。
div {
width: 200px;
height: 100px;
overflow: auto;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
overflow |
visible |
領域をはみ出して表示する （初期値） |
hidden |
はみ出た部分を表示しない | |
scroll |
スクロールで表示する | |
auto |
自動 （一般的にはスクロールで表示） |
表示サンプル
以下は、表示モードが互換モードの場合の表示例です。
| ブラウザ | IE 7 | Firefox 2 | Opera 9 |
|---|---|---|---|
visible |
 |
 |
 |
hidden |
 |
 |
 |
scroll |
 |
 |
 |
auto |
 |
 |
 |
visible- Firefoxでは領域をはみ出して表示しますが、IEとOperaでは領域を広げて表示してしまいます。ただし、表示モードが標準モードの場合には、IE（7以上）とOperaでも領域をはみ出して表示します。（領域をはみ出して表示するのが正しい解釈となります）
hidden- 上記の全てのブラウザで同じように表示されます。（はみ出た部分を表示しません）
scroll- 上記の全てのブラウザで同じように表示されます。（縦横のスクロールバーが表示されます）
auto- 上記の全てのブラウザで同じように表示されます。（縦のスクロールバーだけが表示されます）
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
div {
width: 70%;
height: 150px;
margin-bottom: 1.5em;
background-color: #ffffff;
border: 1px #c0c0c0 solid;
color: #000000;
}
div.example1 { overflow: auto; }
div.example2 { overflow: hidden; }
</style>
</head>
<body>
<div class="example1">
<p>自動 （一般的にはスクロールで表示）</p>
...
</div>
<div class="example2">
<p>はみ出た部分を表示しない</p>
...
</div>
</body>
</html>
- 表示例
-
自動 （一般的にはスクロールで表示）
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール
はみ出た部分を表示しない
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール