CSS overflow | CSS プロパティ値| 意味使い方実例

CSS overflow| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル

2018-07-03 css-reference

ページコンテンツ

`overflow` CSS プロパティとは

トピック：コンテンツが要素のコンテンツ領域をオーバーフローしたときに、コンテンツをクリップするか、スクロールバーをレンダリングするか、オーバーフローコンテンツを表示するかを指定することができる

基本書式：

セレクタ

{

overflow

値;

}

 .webref1 {
    overflow: scroll;
}

.webref2 {
    overflow: hidden;
}

.webref3 {
    overflow: auto;
}

.webref4 {
    overflow: visible;
}

デフォルト値・初期値 :	`visible`
適用対象 :	ブロックコンテナ、フレックスコンテナ、グリッドコンテナ
継承 :	不可
メディア :	visual
計算値 :	指定値
`CSS Version`	`CSS2 ～`
アニメーションの種類 :	個別アニメーション可能なプロパティ一覧
JavaScript 構文	object.style.overflow="funWebref"
正規順序 :	形式文法で定義される一意のあいまいでない順序
CSSの構文	`overflow: visible \| hidden \| scroll \| auto \| initial \| inherit;`

値	説明
`visible`	コンテンツはクリップされない要素のボックスの外側にレンダリングされるため、他のコンテンツと重複する可能性があります。これはデフォルト値です。
`hidden`	要素のボックスをオーバーフローさせたコンテンツはクリップされ、残りのコンテンツは非表示になる
`scroll`	オーバーフローはクリップされますが、スクロールバーが追加されて残りのコンテンツが表示される
`auto`	コンテンツが要素のボックスをオーバーフローすると、スクロールバーが表示され、残りのコンテンツが表示される
`inherit`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

サポートするデスクトップブラウザ対応・互換性

Property	Desktop 互換性
overflow	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本サポート	フルサポート◯1	フルサポート◯12	フルサポート◯1	フルサポート◯4	フルサポート◯7	フルサポート◯1
`overflow-x,overflow-y`の複数キーワード構文	フルサポート◯68	サポートなし✖	フルサポート◯61	サポートなし✖	フルサポート◯55	サポートなし✖

Property	Mobile 互換性
overflow	Android	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
基本サポート	不明	不明	フルサポート◯あり	フルサポート◯4	不明	不明	不明
`overflow-x,overflow-y`の複数キーワード構文	フルサポート◯68	フルサポート◯68	サポートなし✖	フルサポート◯61	フルサポート◯55	サポートなし✖	サポートなし✖

：overflow 関連記事