overflow-xプロパティ
は、横幅が指定された要素でその範囲内に内容が入りきらない場合に、
横にはみ出た部分の表示方法
を指定します。
機能としては
overflowプロパティ
と類似していますが、横スクロールバーのみが表示され、縦スクロールバーは表示されません。
overflow-xプロパティ
は、デザインやインターフェースの観点から、縦スクロールバーのみを消したり、擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。
指定できる値の形式は，以下のとおりです。
visible
要素ボックス
から
はみ出して表示されます。
（初期値）
なお，古いバージョンの IE では，内容がはみ出すのではなく，ボックスの方が内容に合わせて拡張されます。
hidden
要素ボックス
から
はみ出た部分は表示されません。
scroll
入りきらない内容は
スクロールすれば見られる
ようになります。
（通常はスクロール・バーが表示されます）
ブラウザーに依存
します。
（一般的にはスクロールにより見られるようになります）
no-display
要素ボックス
に入りきらない場合には，
要素ボックス
が削除された状態で，
何も表示されません。
（
display:
none
と同様の状態）
no-content
要素ボックス
に入りきらない場合には，
要素ボックス
が非表示の状態で，
何も表示されません。
（
visibility:
hidden
と同様の状態）
no-display
と
no-content
の違いは，設定した
要素ボックス
の領域が確保されたままの状態（
no-content
）であるか，それを削除して他の要素を詰めて表示した状態（
no-display
）であるかです。
<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><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 class="sample3">
<b>class="sample3": hidden</b>
<br>はみ出た部分は表示されません。
<br>Content that exceeds the dimensions of the object is not shown.
<p class="sample4">
<b>class="sample4": auto</b>
<br>ブラウザに依存します（一般的にはスクロールして見られるようになります）。
<br>Content is clipped and scrolling is added only when necessary.
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.
「とほほの WWW 入門」の「スタイルシート入門 」 の 「overflow-x プロパティ」のページ
「HTMLクイック リファレンス」の「overflow-x プロパティ」のページ
「ねこだまのCSSリファレンス&デモ」の「overflow-x プロパティ」のページ
「W3C」の「overflow-x プロパティ」のページ
「HTMLクイック リファレンス」の「overflow
-x プロパティ」のページ
初版：2012年4月18日 最終更新：2015年7月23日
