お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

overflow-x

x軸方向(横方向)のはみ出したコンテンツの表示方法を指定します。

div.test { overflow-x: visible;}
div.test1 { overflow-x: hidden;}
div.test2 { overflow-x: scroll;}
div.test3 { overflow-x: auto;}

値	概要
visible	はみ出して表示されます。この『visible』が初期値です。
hidden	はみ出した部分は表示されません。
scroll	はみ出した部分はスクロールで閲覧できるようになります。
auto	はみ出した部分の表示をブラウザに委ねます。一般的なブラウザでは『scroll』と指定した場合と変わりません。

<div style="overflow-x: visible; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">ここは横幅200px、高さ100pxのdiv要素(赤枠の要素)です。</div>

lt;div style="overflow-x: hidden; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">ここは横幅200px、高さ100pxのdiv要素(赤枠の要素)です。</div>

<div style="overflow-x: scroll; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">ここは横幅200px、高さ100pxのdiv要素(赤枠の要素)です。</div>

<div style="overflow-x: auto; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">ここは横幅200px、高さ100pxのdiv要素(赤枠の要素)です。</div>

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

x軸方向(横方向)のはみ出したコンテンツの表示方法を指定します。

一般的なブラウザでは『auto』と指定した場合と『scroll』と指定した場合で表示方法に変化はありません。

この『overflow-x』プロパティはIEが独自に追加したプロパティとなっておりますが、現状ほぼ全てのブラウザで実行させることができます。ただし、元々はIE独自の機能となっているため、動作チェックは念入りに行なったほうが良いかもしれません。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ