Overflow プロパティ
最終更新：2026-09-13
overflow Overflow プロパティ
overflow プロパティは、コンテンツがコンテナの境界を超えたときの挙動を制御し、溢れたコンテンツを扱うための中核となる道具です。初期値の visible は溢れたコンテンツを表示させ、hidden は切り取り、scroll は常にスクロールバーを表示し、auto は必要なときだけスクロールバーを表示します。これが最もよく使われる値です。
| カテゴリ | |
|---|---|
| 初期値 | visible |
| 継承 | いいえ |
| 適用対象 | block-container |
| アニメーションタイプ | discrete |
| CSS バージョン | CSS2 |
| 状態 | 標準 |
📝 構文
overflow: visible | hidden | clip | scroll | auto;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
visible | hidden | scroll | auto | キーワード | 溢れたコンテンツの処理方法。 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| すべての主要ブラウザーでサポート | |||||
ヒント： overflow:hidden や auto は新しいブロック整形コンテキスト（BFC）を作成し、float の解除にも使えます。
❓ よくある質問
Qoverflow:auto と overflow:scroll の違いは何ですか？
Ascroll はコンテンツが溢れていなくても常にスクロールバーを表示し、両方向にスクロールバー用のスペースを確保します。auto はコンテンツが実際に溢れたときだけスクロールバーを表示し、それ以外では完全に隠すため、見た目がすっきりします。ほとんどの用途では auto が推奨されます。どちらもコンテンツをボックス内に閉じ込めるため、スクロール可能領域の中の要素が親を超えてスクロールすることはなく、またどちらもページ自体のスクロールを防ぐものではない点に注意してください。
Qコンテンツが溢れたときにスクロール可能にするにはどうすればよいですか？
Aまずコンテナに height または max-height で確定した高さを与え、次に overflow:auto または scroll を設定します。コンテンツがコンテナのサイズを超えるとスクロールして表示できるようになります。例えば .list { height:300px; overflow:auto; } です。ページ全体のスクロールでは、html や body に overflow を制限してはいけません。そうするとページの既定のスクロール動作が失われます。また、水平方向の溢れはよくある副作用なので、コンテナの幅も制約されていることを確認してください。
Qなぜ overflow:hidden は float を解除するのですか？
Aoverflow を hidden、auto、scroll、clip のいずれかに設定すると、要素はブロック整形コンテキスト（BFC）を作成します。BFC は float された子の高さを考慮に入れるため、親が潰れる問題が解決します。そのため float の親に overflow:hidden を追加するのは古典的な解除手法です。ただし、溢れたコンテンツも切り取られるため、ボックスの外にはみ出すドロップダウンやツールチップが切れる可能性がある点に注意してください。
Qoverflow:hidden と overflow:visible の違いは何ですか？
Avisible（既定）は溢れたコンテンツをボックスの外に表示します。レイアウトには影響しませんが、隣接する要素を覆うことがあります。hidden は溢れを切り取り、コンテンツを見えなくし、スクロールして表示することもできなくします。hidden は BFC の作成、border-radius による丸角内でのコンテンツの切り取り、装飾的な溢れの隠蔽によく使われます。一方 visible は、溢れが本当にコンテナの外に出るべき場合に残すのが最適です。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
