CSS overflowの使い方【はみ出し制御・スクロール】

overflowとは？

overflowは、要素からはみ出した内容の表示方法を制御するCSSプロパティです。テキストが長すぎて枠からはみ出す、画像が大きすぎて親要素に収まらない——そんなときにoverflowで対処します。

たとえば、小さな箱に長い手紙を入れる場面を想像してください。箱からはみ出た部分をどうするか。そのまま見せるか、切り取るか、スクロールで読めるようにするか。overflowはこの「はみ出し対策」を決めるプロパティです。

Webページでは、要素のサイズを固定することがよくあります。カードのデザインを揃えたいとき、チャット画面の高さを決めたいとき。そのとき中身が枠より大きくなると「はみ出し」が起きます。overflowを正しく使えば、見た目が崩れるのを防げます。

overflowの値

visible（初期値・はみ出す）

はみ出した内容がそのまま表示されます。デフォルトの動作です。

何も指定しなければこの状態です。はみ出した文字や画像が、隣の要素に重なって表示されることがあります。意図しない重なりが起きたら、overflowの設定を見直しましょう。

hidden（はみ出し部分を非表示）

はみ出した部分が切り取られて見えなくなります。

.box {
  width: 200px;
  height: 100px;
  overflow: hidden; /* はみ出し部分を非表示 */
}

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

はみ出しの有無に関わらず、常にスクロールバーが表示されます。

内容が少なくてもスクロールバーが出るため、見た目が気になることがあります。特別な理由がなければ、autoを使うほうが自然です。OSによってスクロールバーの見た目が異なる点にも注意しましょう。

auto（必要なときだけスクロール）

内容がはみ出したときだけスクロールバーが表示されます。最もよく使う値です。

.chat-area {
  height: 400px;
  overflow: auto; /* 内容が多いときだけスクロール */
}

overflow-x / overflow-y（方向別指定）

横方向と縦方向を別々に制御できます。

.horizontal-scroll {
  overflow-x: auto;    /* 横方向はスクロール */
  overflow-y: hidden;  /* 縦方向ははみ出し非表示 */
}

💡 CSS入門ガイドでCSSの基本を確認できます。

実践例3つ

テキストの省略表示（text-overflow: ellipsis）

長いテキストを1行で省略して「...」を表示するテクニックです。

.truncate {
  white-space: nowrap;      /* 折り返さない */
  overflow: hidden;         /* はみ出し非表示 */
  text-overflow: ellipsis;  /* 省略記号を表示 */
  max-width: 200px;
}

この3つのプロパティはセットで使います。どれか1つでも欠けると省略表示になりません。white-spaceで折り返しを止め、overflowではみ出しを隠し、text-overflowで「...」を付けます。ニュースサイトの記事一覧やSNSの投稿プレビューでよく見かけるテクニックです。

複数行のテキストを省略したい場合は、-webkit-line-clampという別のプロパティを使います。ただし対応ブラウザに注意が必要です。

横スクロールのカードリスト

.card-list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px; /* スクロールバー分の余白 */
}

.card-list .card {
  flex: 0 0 280px; /* 固定幅・縮まない */
}

ポイントは、子要素（カード）にflex: 0 0 280pxを指定することです。これは「伸びない・縮まない・幅280px固定」という意味です。この指定がないと、カードが親の幅に合わせて縮んでしまい、横スクロールになりません。

スマホでは横スクロールのUIがよく使われます。画像ギャラリーやおすすめ商品の表示に便利です。

📖 Flexbox入門で横並びの基本を学べます。

固定高さのチャットエリア

.chat {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

チャットアプリやコメント欄でよく使うパターンです。heightで高さを固定し、overflow-y: autoで縦方向だけスクロールさせます。新しいメッセージが追加されたとき、JavaScriptでスクロール位置を一番下に移動させると、より本格的なチャットUIになります。

paddingを指定しておくと、テキストが枠にくっつかず読みやすくなります。border-radiusで角を丸くすると、モダンな見た目になります。

overflowとレイアウトの関係

overflow: hidden で float を解除

古いレイアウト手法（float）を使ったとき、親要素に overflow: hidden を指定すると高さが正しく計算されます。現在はFlexboxやGridを使うのが主流なので、この用途は減っています。

overflow と border-radius の組み合わせ

角丸の要素内に画像を配置するとき、overflow: hidden を指定すると画像も角丸に切り取られます。

.card {
  border-radius: 12px;
  overflow: hidden; /* 中の画像も角丸になる */
}

.card img {
  width: 100%;
  display: block;
}

🔗 positionプロパティとの関係も理解しておきましょう。

よくある間違い

• 親要素に高さ指定がないとoverflowが効かない：overflow: auto でスクロールさせたい場合、親要素に height や max-height を指定する必要があります。高さが未指定だと要素が伸びるだけでスクロールバーは出ません。
• overflow: hiddenを指定したのに子要素が見切れる：position: absoluteの子要素はoverflowの影響を受けないことがあります。親にposition: relativeを指定すると解決します。
• 横スクロールが効かない：子要素の合計幅が親より大きくないとスクロールは発生しません。子要素にflex-shrink: 0を指定し忘れていないか確認しましょう。

📖 displayプロパティで要素の表示形式を確認しましょう。

まとめ

スクロールスナップと組み合わせると、さらにリッチなUIが作れます。

overflowは地味なプロパティですが、使いこなせるとUIの完成度が大きく変わります。まずはautoとhiddenの2つを覚えて、実際のプロジェクトで試してみましょう。