overflow-x CSS プロパティとは
トピック：コンテンツがクリップするか、スクロールバーをレンダリングするか、要素のコンテンツ領域の左右端にコンテンツがオーバーフローしたときにオーバーフローコンテンツを表示するかどうかを指定する ことができる
プロパティ overflow-x
基本 書式：セレクタ {overflow-x:値;}
実例 コード 1
サンプル コードを試す .webref1 {
overflow-x: scroll;
}
.webref2 {
overflow-x: hidden;
}
.webref3 {
overflow-x: auto;
}
.webref4 {
overflow-x: visible;
}
プロパティ 定義と使用法
| デフォルト値・初期値 : | visible |
|---|
| 適用対象 : | 非置換ブロックレベル要素と非置換インラインブロック要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| JavaScript 構文 | object.style.overflowX="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | overflow-x: visible | hidden | scroll | auto | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
visible | コンテンツはクリップされない要素のボックスの外側にレンダリングされるため、他のコンテンツと重複する可能性があります。これはデフォルト値です。 |
hidden | 要素のボックスをオーバーフローさせたコンテンツはクリップされ、残りのコンテンツは非表示になる |
scroll | オーバーフローはクリップされますが、スクロールバーが追加されて残りのコンテンツが表示される |
auto | コンテンツが要素のボックスをオーバーフローすると、スクロールバーが表示され、残りのコンテンツが表示される |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| 機能 | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本サポート | 1.0 | 3.5 (1.9.1) | 5.0 [*] | 9.5 | 3.0 |
|---|
サポートするモバイル ブラウザ対応・互換性
| 機能 | Android | Chrome for Android | Firefox Mobile | IE Mobile | Opera Mobile | Safari Mobile |
|---|
| 基本サポート | 1.0 | サポート◯ | 1.0 (1.9.1) | サポート◯ | サポート◯ | サポート◯ |
|---|
CSS overflow-x | CSS プロパティ 値| 意味 使い方 実例 – WebRef