スタイルシートリファレンス > overflow

スタイルシートリファレンス overflow


overflow はみ出た内容の表示方法を指定する (IE4/N6)

領域をはみ出た時の内容の表示方法を指定します。

visible
表示する:規定値
hidden
隠す
scroll
スクロールバーで表示する
auto
自動

▲ページ先頭へ

使用例 overflow

縦100px 横400pxのボックスを作り、その中に3個のサイズの違う赤、青、緑のボックスを作ります

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.box_r {width:360px;height:25px;background-color:#ff0000;}
.box_g {width:390px;height:25px;background-color:#00ff00;}
.box_b {width:420px;height:25px;background-color:#0000ff;}
.box1 {
width:400px;
height:100px;
background-color:#cccccc;
overflow:visible;
}
.box2 {
width:400px;
height:100px;
background-color:#cccccc;
overflow:hidden;
}
.box3 {
width:400px;
height:100px;
background-color:#cccccc;
overflow:scroll;
}
.box4 {
width:400px;
height:100px;
background-color:#cccccc;
overflow:auto;
}
-->
</style>
</head>
<body>
<div class="box1">
<p>visibleは、このように表示されます。</p>
<div class="box_r">BOX1</div>
<div class="box_g">BOX2</div>
<div class="box_b">BOX3</div>
</div>
</br>
<div class="box2">
<p>hiddenは、このように表示されます。</p>
<div class="box_r">BOX1</div>
<div class="box_g">BOX2</div>
<div class="box_b">BOX3</div>
</div>
</br>
<div class="box3">
<p>scrollは、このように表示されます。</p>
<div class="box_r">BOX1</div>
<div class="box_g">BOX2</div>
<div class="box_b">BOX3</div>
</div>
</br>
<div class="box4">
<p>autoは、このように表示されます。</p>
<div class="box_r">BOX1</div>
<div class="box_g">BOX2</div>
<div class="box_b">BOX3</div>
</div>
</br>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


visibleは、このように表示されます。

BOX1
BOX2
BOX3



hiddenは、このように表示されます。

BOX1
BOX2
BOX3



scrollは、このように表示されます。

BOX1
BOX2
BOX3



autoは、このように表示されます。

BOX1
BOX2
BOX3


▲ページ先頭へ

関連項目【配置・表示】

display
ブロック、インラインなど表示形式を指定する
position
配置方法を指定する
top
上からの配置位置を指定する
bottom
下からの配置位置を指定する
left
左からの配置位置を指定する
right
右からの配置位置を指定する
float
左または右に寄せて配置する
clear
回り込みを解除する
z-index
重なりの順序を指定する
direction
文字の表示方向を指定する
unicode-bidi
ユニコードの文字表示の方向を指定する
overflow
はみ出た内容の表示方法を指定する
overflow-x
はみ出た内容横方向の表示方法を指定する (IE5)
overflow-y
はみ出た内容縦方向の表示方法を指定する (IE5)
clip
表示する範囲を指定する
visibility
表示するしないを指定する

▲ページ先頭へ

スタイルシートリファレンス > overflow