overflow 【内容の表示方法を指定する】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

overflowプロパティは、主にブロックレベル要素の内容物が入りきらない場合に、はみ出した部分をどのように表示するかを指定する際に使用します。
InternetExplorer独自の仕様として、overflow-xで横方向のみ、overflow-yで縦方向のみの指定が出来ますが、非推奨です。
また、Mac版InternetExplorerには結構致命的なバグがあるそうなので、大事な部分で使用する場合は、各ブラウザでチェックした方が良さそうです。

visible
ボックスからはみ出して表示されます。これが初期値です。IEでは、ボックスの方が内容に合わせて拡張してしまいます。

scroll
ボックスにスクロールバーが表示されます。内容が入りきらない場合は、スクロールして見られるようになります。

hidden
はみ出した部分は表示されません。

auto
ブラウザが自動的に判断します。殆どの場合、内容が入りきらない場合は、スクロールして見られるようになります。

overflowの使用例

CSSファイル

.sample001 {
 overflow: scroll;
 width: 200px;
 height: 100px;
 background-color: #ffcccc;
}
.sample002 {
 overflow: hidden;
 width: 200px;
 height: 100px;
 background-color: #ccffcc;
}
.sample003 {
 overflow: auto;
 width: 200px;
 height: 100px;
 background-color: #ccccff;
}

HTMLソース

<p class="sample001">
overflowプロパティ使用例<br />
ここにはoverflowプロパティの『scroll』が指定してあります。ここにはoverflowプロパティの『scroll』が指定してあります。ここにはoverflowプロパティの『scroll』が指定してあります。
</p>

<p class="sample002">
overflowプロパティ使用例<br />
ここにはoverflowプロパティの『hidden』が指定してあります。ここにはoverflowプロパティの『hidden』が指定してあります。ここにはoverflowプロパティの『hidden』が指定してあります。
</p>

<p class="sample003">
overflowプロパティ使用例<br />
ここにはoverflowプロパティの『auto』が指定してあります。ここにはoverflowプロパティの『auto』が指定してあります。ここにはoverflowプロパティの『auto』が指定してあります。
</p>

表示すると

overflowプロパティ使用例
ここにはoverflowプロパティの『scroll』が指定してあります。ここにはoverflowプロパティの『scroll』が指定してあります。ここにはoverflowプロパティの『scroll』が指定してあります。

overflowプロパティ使用例
ここにはoverflowプロパティの『hidden』が指定してあります。ここにはoverflowプロパティの『hidden』が指定してあります。ここにはoverflowプロパティの『hidden』が指定してあります。

overflowプロパティ使用例
ここにはoverflowプロパティの『auto』が指定してあります。ここにはoverflowプロパティの『auto』が指定してあります。ここにはoverflowプロパティの『auto』が指定してあります。

表示・配置関連項目

overflow(x y) はみ出た内容の表示方法を指定する 
position 要素の配置方法を指定する 
top 上からの配置位置(距離)を指定する 
right 右からの配置位置(距離)を指定する 
bottom 下からの配置位置(距離)を指定する 
left 左からの配置位置(距離)を指定する 
display 要素の形式(ブロック・インライン)を指定する 
float 左寄せ、右寄せ配置の指定 
clear 回り込み(float)を解除する 
z-index 重なりの順序を指定する 
visibility ボックスの表示・非表示を指定する 
clip ボックスを切り抜き表示(クリッピング)する 
direction 文字表記の方向(左右)を指定する 
unicode-bidi Unicodeの文字表記の方向を上書きする 
writing-mode 文字表記の方向(縦横)を指定する(IE独自) 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img