スタイルシート［CSS］/ボックス/ボックスからはみ出た部分の表示方法を指定する

*overflow: ***;*

ブラウザ
特性: 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: 400px;
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>

表示例

自動（一般的にはスクロールで表示）

スクロール

はみ出た部分を表示しない

スクロール

サイト内検索

ボックス

ボックスからはみ出た部分の表示方法を指定する

overflow: ***;

【表示サンプル】

使用例

関連ページ

*overflow: ***;*