overflow-***: ***;
- ブラウザ
- 特性
- 独自拡張プロパティ
overflow-*** は、overflow の縦と横の処理を個別に指定するプロパティです。
（*** の部分には、x または y が入ります）
overflow-x… 横方向の指定overflow-y… 縦方向の指定
div.example1 {
width: 200px;
height: 100px;
white-space: nowrap;
overflow-x: scroll;
}
div.example2 {
width: 200px;
height: 100px;
overflow-y: scroll;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| overflow-x （横）
overflow-y （縦） |
visible | 領域をはみ出して表示する |
| hidden | はみ出た部分を表示しない | |
| scroll | スクロールで表示する | |
| auto | 自動 （スクロールで表示） |
※このプロパティは、CSS 2では定義されていません。
このプロパティはIEの独自拡張となります。未対応ブラウザでは、意図しない表示になってしまう場合があるのでご注意ください。
※Firefoxは1.5から対応しているようです。
使用例
<!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: 240px;
height: 120px;
margin-bottom: 1.5em;
background-color: #ffffff;
border: 1px #c0c0c0 solid;
color: #000000;
}
div.example1 {
overflow-x: auto;
white-space: nowrap;
}
div.example2 {
overflow-y: auto;
}
</style>
</head>
<body>
<div class="example1">
<p>横方向のスクロール</p>
...
</div>
<div class="example2">
<p>縦方向のスクロール</p>
...
</div>
</body>
</html>
表示例
横方向のスクロール
横のスクロール・横のスクロール・横のスクロール・横のスクロール・横のスクロール
縦方向のスクロール
縦のスクロール
縦のスクロール
縦のスクロール
縦のスクロール
縦のスクロール
- サイト内検索
