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では定義されていません。
使用例
<!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: 220px;
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>
- 表示例
-
横方向のスクロール
横のスクロール・横のスクロール・横のスクロール・横のスクロール・横のスクロール
縦方向のスクロール
縦のスクロール
縦のスクロール
縦のスクロール
縦のスクロール
縦のスクロール