Web制作をしていると、ボックスの中に入れたテキストや画像が「枠からはみ出してしまう」「スクロールが出ず一部が見えない」といったレイアウトの悩みを感じることがあります。
そんなときに役立つのが CSSのoverflowプロパティです。この記事では、overflowの基本と実用的な使い方を初心者向けにわかりやすく解説します。

overflowとは？

overflowは、ボックス（要素）の中に収まりきらなかった内容を「どう表示するか」をコントロールするCSSプロパティです。
スクロールさせるのか、非表示にするのか、それともそのまま表示するのかを指定できます。

指定できる主な値と特徴

よく使われる実装パターン

① はみ出し部分を非表示にする（hidden）

デザインを整えるために、余分な部分を見せたくないときに便利です。

.box {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

② スクロールバーを常に表示（scroll）

常にスクロールが必要なレイアウトや、コンテンツの変動に関係なく動作を統一したいときに。

.box {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

③ 中身があふれたときだけスクロール（auto）

必要なときだけスクロールバーが表示されるので、見た目もすっきりします。

.box {
  width: 200px;
  height: 100px;
  overflow: auto;
}

縦方向・横方向だけ指定するには？

overflowには-x（横）と-y（縦）という個別指定も可能です。

.box {
  overflow-x: auto;   /* 横方向のみスクロール */
  overflow-y: hidden; /* 縦方向は表示しない */
}

例えば横長のテーブルや画像ギャラリーなどに活用できます。

注意点と使い分けのコツ

• visibleは初期値ですが、はみ出したままになるため注意が必要です。
• hiddenを使うと、中身が切れてしまうのでリンクやボタンが見えなくならないように注意しましょう。
• autoとscrollの違いは、スクロールバーの表示の有無です。基本はautoが使いやすいです。

実用シーン例

• ブログの「関連記事」一覧をスクロール可能な横並びにしたい
• 長文テキストをコンパクトな枠内に収めたい
• デザイン崩れを防ぎたいときの安全策として

おわりに

overflowを適切に使うことで、レイアウトの安定感や見た目の美しさがぐっと向上します。
特にautoやhiddenは実務でもよく使うので、ぜひ実際に試してみて、仕組みを理解しておきましょう。

Web制作では、こうした細かい調整の積み重ねが使いやすいサイトを作るカギになります。