トップページ > スタイルシートリファレンス > overflow

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

overflow …… はみ出た内容の表示方法を指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6

overflowプロパティは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。

overflowプロパティは、デザインやインターフェースの好みで、 擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。

■値

visible
ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
scroll
入りきらない内容はスクロールして見られるようになります。
hidden
はみ出た部分は表示されません。
auto
ブラウザに依存します(一般的にはスクロールして見られるようになります)。

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample1 {width:200px; height:60px; background-color:#ee0000; overflow:visible;}
p.sample2 {width:200px; height:60px; background-color:#ee0000; overflow:scroll;}
p.sample3 {width:200px; height:60px; background-color:#ee0000; overflow:hidden;}
p.sample4 {width:200px; height:60px; background-color:#ee0000; overflow:auto;}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample2">
<b>scroll</b><br>
入りきらない内容はスクロールして見られるようになります。<br>
Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.
</p>
<p class="sample3">
<b>hidden</b><br>
はみ出た部分は表示されません。<br>
Content that exceeds the dimensions of the object is not shown.
</p>
<p class="sample4">
<b>auto</b><br>
ブラウザに依存します(一般的にはスクロールして見られるようになります)。<br>
Content is clipped and scrolling is added only when necessary.
</p>
<p class="sample1">
<b>visible</b><br>
ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。<br>
Default. Content is not clipped and scroll bars are not added.
</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

scroll
入りきらない内容はスクロールして見られるようになります。
Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.

hidden
はみ出た部分は表示されません。
Content that exceeds the dimensions of the object is not shown.

auto
ブラウザに依存します(一般的にはスクロールして見られるようになります)。
Content is clipped and scrolling is added only when necessary.

visible
ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
Default. Content is not clipped and scroll bars are not added.

■関連項目

overflow …… はみ出た内容の表示方法を指定する
overflow-x …… はみ出た内容の表示方法を指定する(IE独自の仕様)
overflow-y …… はみ出た内容の表示方法を指定する(IE独自の仕様)
position …… ボックスの配置方法(基準位置)を指定する
top …… 上からの配置位置(距離)を指定する
bottom …… 下からの配置位置(距離)を指定する
left …… 左からの配置位置(距離)を指定する
right …… 右からの配置位置(距離)を指定する
display …… 要素の表示形式(ブロック・インライン)を指定する
float …… 左または右に寄せて配置する
clear …… 回り込みを解除する
z-index …… 重なりの順序を指定する
visibility …… ボックスの表示・非表示を指定する
clip …… ボックスを切り抜き表示(クリッピング)する
direction …… 文字表記の方向(左右)を指定する
unicode-bidi …… Unicodeの文字表記の方向を上書きする
writing-mode …… 文字表記の方向(縦横)を指定する(IE独自の仕様)
▲ページ先頭へ
トップページ > スタイルシートリファレンス > overflow
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ