項 目 | 説 明 |
---|---|
記述形式 | セレクタ {overflow: 値} |
値 の形式 | visible,hidden,scroll,auto,no-display,no-content |
初 期 値 | visible |
対応ブラウザー | C2+ / e4+ / N?+ / Fx1+ / Op4+ / Ch1+ / Sa1+ |
適用可能な要素 | 非置換のブロックレベル要素と非置換のインライン・ブロック要素 |
継 承 | しない |
overflowプロパティは,横幅や高さが指定された要素でその範囲内に内容が入りきらない場合に,はみ出た部分の表示方法 を指定します。
overflowプロパティは,デザインやインターフェースの観点から,
フレームやテキストエリアなどに類した表現をしたい場合に用いるケースが多いようです。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
visible | 要素ボックス からはみ出して表示されます。 (初期値) なお,古いバージョンの IE では,内容がはみ出すのではなく,ボックスの方が内容に合わせて拡張されます。 |
hidden | 要素ボックス からはみ出た部分は表示されません。 |
scroll | 入りきらない内容はスクロールすれば見られるようになります。 (通常はスクロール・バーが表示されます) |
auto | ブラウザーに依存します。 (一般的にはスクロールにより見られるようになります) |
no-display | 要素ボックス に入りきらない場合には,要素ボックスが削除された状態で,何も表示されません。 (display: none と同様の状態) |
no-content | 要素ボックス に入りきらない場合には,要素ボックスが非表示の状態で,何も表示されません。 (visibility: hidden と同様の状態) |
備 考 | no-display と no-content の違いは,設定した 要素ボックス の領域が確保されたままの状態(no-content)であるか,それを削除して他の要素を詰めて表示した状態(no-display)であるかです。 |
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- p.sample1 {width:320px; height:60px; background-color:#ee8888; overflow: visible;} p.sample2 {width:320px; height:60px; background-color:#ee8888; overflow: scroll;} p.sample3 {width:320px; height:60px; background-color:#ee8888; overflow: hidden;} p.sample4 {width:320px; height:60px; background-color:#ee8888; overflow: auto;} --> </style> |
HTML <body> ~ </body> |
<p class="sample1"> <b>class="sample1": visible</b> <br>ボックスからはみ出して表示されます。これが初期値です。 なお,Internet Explorerでは,内容がはみ出すのではなく,ボックスの方が内容に合わせて拡張されます。 <br>Default. Content is not clipped and scroll bars are not added. </p> <p><br><br><br><br></p> <p class="sample2"> <b>class="sample2": 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>class="sample3": hidden</b> <br>はみ出た部分は表示されません。 <br>Content that exceeds the dimensions of the object is not shown. </p> <p class="sample4"> <b>class="sample4": auto</b> <br>ブラウザに依存します(一般的にはスクロールして見られるようになります)。 <br>Content is clipped and scrolling is added only when necessary. </p> |
ブラウザー 表示例 |
---|
class="sample1": visible
class="sample2": scroll
class="sample3": hidden
class="sample4": auto
|