項 目 | 説 明 |
---|---|
記述形式 | セレクタ {overflow-x: 値 } |
値 の形式 | auto,visible,scroll,hidden,no-display,no-content |
初 期 値 | visible |
対応ブラウザー | C3+ / e5+ / N?+ / Fx1.5+ / Op9.5+ / Ch1+ / Sa3+ |
適用可能な要素 | 非置換のブロックレベル要素と非置換のインライン・ブロック要素 |
継 承 | しない |
overflow-xプロパティは、横幅が指定された要素でその範囲内に内容が入りきらない場合に、横にはみ出た部分の表示方法 を指定します。
機能としては overflowプロパティ と類似していますが、横スクロールバーのみが表示され、縦スクロールバーは表示されません。
overflow-xプロパティは、デザインやインターフェースの観点から、縦スクロールバーのみを消したり、擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
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-x: visible;} p.sample2 {width:320px; height:60px; background-color:#ee8888; overflow-x: scroll;} p.sample3 {width:320px; height:60px; background-color:#ee8888; overflow-x: hidden;} p.sample4 {width:320px; height:60px; background-color:#ee8888; overflow-x: auto;} --> </style> </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
|