CSS3: overflow-x プロパティ - 横にはみ出た内容の表示方法

■ 概要

項  目説  明
記述形式 セレクタ {overflow-x: }
値 の形式 autovisiblescrollhiddenno-displayno-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-displayno-content の違いは,設定した 要素ボックス の領域が確保されたままの状態(no-content)であるか,それを削除して他の要素を詰めて表示した状態(no-display)であるかです。

■ 使用例( overflow-x プロパティの利用)

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
ボックスからはみ出して表示されます。これが初期値です。  なお,Internet Explorerでは,内容がはみ出すのではなく,ボックスの方が内容に合わせて拡張されます。
Default. Content is not clipped and scroll bars are not added.





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

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

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

■ 備考

【参考ページ】
【引用】