CSS の overflow
プロパティは、要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを設定します。これは overflow-x
および overflow-y
の一括指定です。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
選択肢としては、クリッピング、スクロールバーの表示、コンテナーの外側にはみ出して周囲の領域に表示するものがあります。
値を (既定値の) visible
以外の値に指定すると、新たなブロック整形コンテキストを生成します。これは技術的な理由で必要なものです。そうでなければ、もしスクロールする要素に浮動要素が交差している時、スクロールするごとに強制的に折り返し処理をやり直すことになり、スクロール操作が遅くなる原因になるからです。
overflow
の効果を得るには、ブロックレベルコンテナーに高さ (height
または max-height
) を設定するか、 white-space
を nowrap
に設定することが必要です。
メモ: 一方の軸をvisible
(既定値) に設定して、もう一方を他の値に設定すると、 visible
は auto
として動作する結果になります。
メモ: JavaScript の Element.scrollTop
プロパティは、 overflow
が hidden
に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。
構文
/* キーワード値 */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;
/* グローバル値 */
overflow: inherit;
overflow: initial;
overflow: unset;
overflow
プロパティは、以下の値の一覧のうち一つまたは二つのキーワードで指定します。二つのキーワードが指定された場合、最初の値が overflow-x
で、二つ目の値が overflow-y
になります。それ以外の場合、 overflow-x
および overflow-y
は同じ値に設定されます。
値
visible
- 内容はクリッピングされず、パディングボックスの外側に表示されることがあります。
hidden
- 内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず、ユーザーがスクロールできるようにするための対応 (ドラッグやスクロールホイールによる方法) もありません。内容はプログラム的に (例えば、
offsetLeft
のようなプロパティの値を設定する方法などで) スクロールすることができますので、要素はスクロールコンテナーになります。 clip
hidden
と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。clip
とhidden
の違いは、clip
キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、display: flow-root
を使用して実現することができます。scroll
- 内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを常に表示します。プリンターはあふれた部分の内容を印刷する可能性があります。
auto
- ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は
visible
と同じように表示されますが、新しいブロック整形コンテキストを生成します。デスクトップブラウザーは内容があふれる場合、スクロールバーを表示します。
overlay
auto
と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。
Mozilla 拡張
-moz-scrollbars-none
[1]- 代わりに
overflow:hidden
を使ってください。 -moz-scrollbars-horizontal
[1]overflow-x
およびoverflow-y
を使用してください。-moz-scrollbars-vertical
[1]overflow-x
およびoverflow-y
を使用してください-moz-hidden-unscrollable
- 内部使用、テーマ向けです。 XML のルート要素と
<html>
、<body>
が、矢印キーとマウスホイールでスクロールすることを禁止します。
[1] Firefox 63 において、この機能は機能設定に隠されています。 about:config の中で layout.css.overflow.moz-scrollbars.enabled
を true
に設定してください。
形式文法
例
p {
width: 12em;
height: 6em;
border: dotted;
overflow: visible; /* content is not clipped */
}
visible
(既定)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: hidden; /* スクロールバー表示なし */ }
p { overflow: scroll; /* 常にスクロールバーを表示 */ }
overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: auto; /* 必要に応じてスクロールバーを追加 */ }
overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Overflow Module Level 3 overflow の定義 |
草案 |
キーワードを一つだけではなく一つまたは二つで利用できるように構文を変更 |
CSS Basic Box Model overflow の定義 |
草案 | 変更なし |
CSS Level 2 (Revision 1) overflow の定義 |
勧告 | 初回定義 |
初期値 | visible |
---|---|
適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
継承 | なし |
計算値 | 一括指定の各プロパティとして
|
アニメーションの種類 | 個別 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
- 関連 CSS プロパティ:
text-overflow
,white-space
,overflow-x
,overflow-y
,clip
,display