overflow-y とは？初心者が押さえる基本と使い方をやさしく解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

overflow-y とは何か

overflow-y は CSS のプロパティです。要素の縦方向のはみ出しをどう表示するかを決めます。横方向を扱う overflow-x とは別物で、ページのレイアウトを形作るときにとても役立ちます。縦方向の動きを細かく制御できるので、カード状のデザインやメニューのリストなど長い内容を持つ部品でよく使われます。

基本の使い方と値の意味

overflow-y が取りうる主な値は four つです。visible、hidden、scroll、auto。それぞれの意味をざっくり覚えると良いです。

値	意味
visible	はみ出した部分も見えます。元の領域を超えて表示されます。
hidden	はみ出した部分は切り取られ、表示されません。
scroll	縦方向のスクロールバーを必ず表示します。内容が長い場合に便利です。
auto	はみ出したときだけスクロールバーを表示します。通常はこの設定が使われます。

この表を見れば、どの値を選べばいいかの目安がつきます。自分のページを使いやすくしたいときには auto か scroll を選ぶことが多いです。

縦スクロールの具体的な使い方

実際の場面を想像してみましょう。縦に長い文章が入るカード型のボックスやサイドバーを作るとき、height を固定しておくと中身がはみ出した場合に overflow-y が効いてきます。これによりデザインが崩れず、ユーザーは縦方向にのみスクロールして全体の情報を確認できます。

注意点とベストプラクティス

スマートフォンの画面では縦スクロールと他の操作が混ざりやすいので、使いすぎないことが大切です。必要な場面だけ設定し、読みやすい行間や適切な余白とフォントサイズを保つとよいです。また overflow-y は横方向の挙動と組み合わせる場合が多いので、overflow-x も合わせて検討してください。

よくある質問とヒント

Q1 overflow-y を使うべきときは？ A1 主に縦方向に長いコンテンツを扱う場面です。Q2 ブラウザ間の互換性は？ A2 主要なブラウザはサポートしていますが、旧式の環境では動きが異なることがあります。実機での確認が大事です。

まとめ

overflow-y は縦方向の表示を制御する重要な道具です。使い方を正しく理解すれば、ページの見た目と使い勝手を大きく向上させられます。最初は少し練習して、どの場面で縦方向のはみ出しを許可または非表示にするかを自分のページで試してみましょう。

overflow-yの同意語

overflow-y: 縦方向のオーバーフローを制御するCSSプロパティ。要素の縦方向にはみ出した内容の表示挙動を指定します。
縦方向のオーバーフロー: 要素内の縦方向のはみ出しをどう表示するかを決めるCSSの概念。overflow-yとほぼ同義の表現です。
垂直方向のオーバーフロー: 垂直方向のはみ出し挙動を制御する性質を指す表現。overflow-yと同じ意味合いで使われます。
縦方向オーバーフロー: 縦方向のはみ出しを指す言い換え表現。overflow-yの意味と同義として用いられることがあります。
縦方向のはみ出し表示: 縦方向に内容がはみ出たときの表示方法を表す表現。overflow-yの機能を説明する際に使われます。
垂直方向オーバーフロー表示挙動: 垂直方向のはみ出しをどのように表示するかという挙動を指す言い換え表現。
縦スクロール設定: 縦方向のスクロール挙動を設定することを指す表現。overflow-yの役割を説明する際に使われます。
縦方向スクロール挙動: 縦方向のスクロールの挙動を決定する性質を指す言い換え表現。
垂直スクロール挙動: 垂直方向のスクロール挙動を指す表現。overflow-yと同義として使われることがあります。
縦方向の表示挙動: 縦方向における表示の挙動を指す表現。overflow-yの機能を説明する際に用いられます。
縦方向はみ出し表示: 縦方向にはみ出した内容の表示方法を指す言い換え。overflow-yの意味合いと近いです。

overflow-yの対義語・反対語

hidden: overflow-y: hidden の意味。縦方向の溢れを表示せず、内容はボックスの外にはみ出しても見えません。スクロールバーは表示されません。
visible: overflow-y: visible の意味。縦方向の溢れた内容がボックスの外にそのまま表示され、はみ出しが切り取られません。スクロールバーは表示されません。
scroll: overflow-y: scroll の意味。縦方向のスクロールバーを常時表示します。内容が少なくてもスクロールバーが表示される場合があります。
auto: overflow-y: auto の意味。内容がはみ出した場合にのみ縦スクロールバーを表示します。必要なときだけスクロール可能です。
clip: overflow-y: clip の意味。はみ出した内容をクリップして表示せず、スクロールバーは表示されません（サポートはブラウザにより異なる場合があります）。

overflow-yの共起語

overflow-x: 横方向のはみ出し挙動を制御するCSSプロパティ。値には visible/hidden/scroll/auto のいずれかを指定します。
overflow: 要素全体のはみ出し挙動を制御するショートハンドプロパティ。overflow-x と overflow-y に同じ値が適用されます。
scroll: はみ出した内容に対してスクロールバーを表示する値。overflow-y で縦方向のスクロールを有効化します。
auto: はみ出した場合に自動的にスクロールバーを表示するデフォルト値。内容量に応じて表示が変化します。
hidden: はみ出した部分を表示せず非表示にします。スクロールは発生しません。
visible: デフォルト挙動。はみ出した内容を制限なく表示します。スクロールバーは通常表示されません。
height: 縦方向の高さを決定するプロパティ。overflow-y の挙動はこの高さを超えたときに発生します。
max-height: 高さの最大値を設定。これを超えた場合に overflow-y が適用されます。
min-height: 高さの最小値を設定。内容が少なくてもこの高さを確保します。
display: 要素の表示方式を決めるプロパティ。block/inline-block などと組み合わせてレイアウトを作ります。
flex: フレックスボックスのレイアウトを示す特徴。overflow-y はフレックスアイテムのはみ出しにも影響します。
grid: CSS Grid レイアウト。はみ出しと overflow-y の動作が関係します。
box-sizing: サイズ計算の基準を決めるプロパティ。border-box か content-box かで最終的な表示サイズが変わります。
border-box: パディングとボーダーをサイズに含める計算モード。
content-box: パディングとボーダーを含めず、内容領域のサイズで計算するモード。
scrollbar-width: Firefox でスクロールバーの幅を調整するプロパティ。auto/thin/none の指定が可能。
scrollbar-color: Firefox のスクロールバーの色を指定するプロパティ。thumb と track を組み合わせます。
scrollbar-gutter: スクロールバーのための予備領域を確保するプロパティ。レイアウトの安定性を向上します。
::-webkit-scrollbar: Chrome/Safari など WebKit 系ブラウザでスクロールバーをカスタマイズする際の擬似要素。
cross-browser: 複数のブラウザ間での挙動差を意識すること。overflow-y はブラウザ差が出やすいポイントです。
Chrome: Google Chrome のレンダリングとスクロール挙動。バージョン差により挙動が異なることがあります。
Firefox: Firefox のレンダリングとスクロールバー関連プロパティの挙動が異なることがある点に注意。
Safari: Safari のスクロール挙動。長いコンテンツの表示やスクロールバーの表示方法に差が出ることがあります。
Edge: Microsoft Edge の挙動。Chromium ベース移行後は Chrome に近いが、微妙な差が残ることがあります。
vertical scrolling: 縦方向のスクロール。overflow-y の基本的な用途です。
horizontal overflow: 横方向へのはみ出し。overflow-x の制御と組み合わせて使われます。
writing-mode: 文字の書字方向（横書き/縦書き）により、overflow-y の表示領域の取り方が影響されることがあります。

overflow-yの関連用語

overflow-y: 垂直方向のはみ出しをどう扱うかを指定するCSSプロパティ。縦スクロールバーの表示や挙動を制御します。
overflow-x: 水平方向のはみ出しを扱うCSSプロパティ。横スクロールバーの表示や挙動を制御します。
overflow: 縦横のはみ出しを一括で設定するショートハンド。値には visible/hidden/scroll/auto などを組み合わせて使います。
overflow-wrap: 長い単語や文字列が要素の幅を超える場合の改行挙動を決定します。主にテキストの折り返しに影響します。
white-space: テキストの改行や空白の扱いを指定します。nowrap や pre などを設定して、overflow の発生に影響を与えます。
height: 要素の高さを決定します。固定高さにすると内容がはみ出すと overflow が発生します。
max-height: 要素の最大高さを制限します。これを超えると overflow-y が発生します。
min-height: 要素の最小高さを設定します。高さがこれを下回らないようにしますが、内容が多いと overflow が起こります。
scrollbar-width: スクロールバーの横幅を調整します（主に Firefox で効果）。
scrollbar-color: スクロールバーの色を設定します。対応ブラウザでスタイルをカスタマイズできます。
scroll-behavior: スクロールの挙動を滑らかにする設定。auto または smooth を指定します。
overflow-anchor: ページ内のアンカー位置の安定性を保つための機能。動的コンテンツ読み込み時のスクロールの揺れを抑えます。
hidden: overflow の値の一つ。はみ出した内容を切り取って表示しません。
visible: overflow の値の一つ。はみ出した内容を表示領域の外にも表示します。