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

最終更新：2026-09-13

overflow-x オーバーフローXプロパティ

overflow-x プロパティは、コンテナから水平方向にはみ出したコンテンツの扱い方を個別に制御し、overflow と同じ値を受け付けます。デフォルト値の visible は、はみ出した部分を表示します。これは、ページの水平スクロールを無効にしたり、ある領域を水平方向にのみスクロール可能にしたりするのによく使われます。

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

📝 構文

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

⚙️ 値

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

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： body に overflow-x:hidden を設定すると、ページの水平スクロールバーを防げます。

❓ よくある質問

Qページの水平スクロールを防ぐにはどうすればよいですか？

Ahtml や body に overflow-x:hidden を設定すると、はみ出しがクリップされますが、これは対症療法にすぎません。根本原因を探す方が良いです。要素がビューポートより広くないか（width が 100% を超えている、長い単語、折り返されていないテキスト、配置された要素など）、そして body のどの子要素がはみ出しているかを開発者ツールで特定してください。原因を直す方が、overflow-x:hidden を追加するより確実です。

Qoverflow-x と overflow の違いは何ですか？

Aoverflow は水平方向と垂直方向の両方を一度に設定するショートハンドです。overflow-x は水平方向のみを設定します。2 つの軸は個別に設定できます。例えば overflow-x:hidden; overflow-y:auto のようにです。1 つの注意点：一方の軸が visible で、もう一方が hidden、auto、scroll の場合、visible の値は強制的に auto に変更されるため、もう一方の軸で真の visible のオーバーフローを維持することはできません。

Qoverflow-x:hidden が効かないことがあるのはなぜですか？

Aよくある原因は次のとおりです。1 つ目は、html と body ではスクロールの扱いが異なるため、両方、あるいは html と body、または html 単独に設定すること。2 つ目は、親要素に幅の制約がないため、親より広い子要素が依然としてはみ出すこと。3 つ目は、もう一方の軸が visible の場合、競合する visible の値が auto に書き換えられることです。html,body 両方に設定し、はみ出しの原因を直すのが確実な方法です。

Q水平方向にスクロール可能な画像リストを作るにはどうすればよいですか？

Aコンテナに overflow-x:auto と white-space:nowrap、または display:flex を指定し、子要素に固定幅を持たせると、行は水平方向にスクロールします。flex の場合は、アイテムが圧縮されないよう flex-shrink:0 を追加してください。モバイルでは、-webkit-overflow-scrolling:touch と組み合わせてスムーズな慣性スクロールを実現します。また、より洗練された感触のために scroll snap の検討もおすすめです。これにより、リストはタッチデバイス上でネイティブな感覚になります。