言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

  1. トップページ
  2. CSS辞典
  3. overflow-x

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>

対応ブラウザ

Chrome Chrome
1 以降
Firefox Firefox
3.5 以降
2 以前 ×
Safari Safari
3 以降
2 以前 ×
Edge Edge
12 以降
全バージョンで対応しています
IE IE
11
10
9
8
7
6
Opera Opera
9.5 以降
8 以前 ×
iOS Safari iOS Safari
1 以降
Android Android Browser
4.4 以降
3 以前 ×
Chrome Android Chrome Android
最新版
デスクトップ版と同等の対応です
Firefox Android Firefox Android
最新版
デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

概要

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

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

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

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