オーバーフローYプロパティ

最終更新：2026-09-13

overflow-y オーバーフローYプロパティ

overflow-y プロパティは、コンテナから垂直方向にはみ出したコンテンツの扱い方を個別に制御し、overflow と同じ値を受け付けます。デフォルト値の visible は、はみ出した部分を表示します。これは最もよく使われるオーバーフロー制御であり、max-height と組み合わせて固定高さのスクロール可能な領域にすることが多いです。

カテゴリ
初期値	visible
継承	いいえ
適用対象	block-container
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

overflow-y: visible | hidden | clip | scroll | auto;

⚙️ 値

値	タイプ	説明
`visible \| hidden \| scroll \| auto`	キーワード	垂直方向のオーバーフロー処理。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
overflow-y	✓ v4	✓ v12	✓ v1	✓ v3.1	✓ v10
すべての主要ブラウザーでサポート

ヒント： overflow-y:auto は、コンテンツがはみ出していないときはスクロールバーを非表示にし、はみ出したときにのみ表示するため、scroll より見た目が良くなります。

❓ よくある質問

Qdiv のコンテンツがはみ出したときにスクロールさせるにはどうすればよいですか？

Adiv に高さの上限と overflow-y:auto を指定します。例えば .list { max-height:300px; overflow-y:auto; } のようにです。コンテンツが高さを超えると垂直スクロールバーが表示され、超えなければ表示されません。短いコンテンツで空白ができないよう、height より max-height を使う方が良いです。これはチャットウィンドウや通知リストなど、同様のスクロールパネルの標準的なパターンであり、overflow がサポートされていなくてもコンテナがそのまま拡張されるため、適切にフォールバックします。

Qoverflow-y:hidden は何をしますか？

A垂直方向にはみ出したコンテンツはクリップされて非表示になり、ユーザーは切り取られた部分をスクロールして見ることができません。これは、固定高さのバナーのように収まることが保証された固定表示領域や、JS でスクロールを制御する領域に適しています。ただしスクロールが完全に無効になる点に注意してください。スクロールは維持したままスクロールバーだけを非表示にしたい（カスタムスクロールバー用）場合は、overflow-y:hidden では不十分です。代わりに visible とスクロールコンテナの技法が必要です。

Qoverflow-y:auto と overflow-y:scroll の違いは何ですか？

Ascroll は、コンテンツがはみ出していなくても常に垂直スクロールバーを表示するため、スクロールバーの溝が常に確保されます。auto はコンテンツがはみ出したときにのみスクロールバーを表示し、それ以外は非表示にします。見た目としては、auto は残った溝がなくすっきりしているため、日常的なレイアウトにはこちらが推奨されます。scroll は、チュートリアルのパネルなどのように、その領域がスクロール可能であることを示したい場合に適しています。

Qoverflow-x と overflow-y は同時に設定できますか？

Aはい。ただし 1 つのルールがあります。両方が visible のときはコンテンツは通常通りはみ出します。一方の軸が visible でないとすぐに、もう一方の軸の visible は自動的に auto に書き換えられます。例えば overflow-x:hidden; overflow-y:visible は実際には overflow-y:auto になります。そのため、単一の軸を設定した後に予期せぬ auto のスクロールバーが表示されることがあり、また真の visible の垂直オーバーフローとクリップされた水平オーバーフローを組み合わせることもできないということでもあります。