Terms Privacy

© Rollpie

HTML/CSS
10 Feb 2026

CSSのoverflowではみ出したコンテンツの表示方法を制御する

要素の中身がボックスの幅や高さを超えたとき、はみ出した部分をどう扱うかを決めるのが overflow プロパティだ。スクロールバーの表示・非表示や、はみ出し部分の切り取りを制御できる。

4 つの値

overflow には主に 4 つの値がある。

visible（初期値）

はみ出したコンテンツがそのまま表示される。ボックスの外側に描画されるため、隣接要素と重なることがある。何も指定しなければこの状態になる。

hidden

はみ出した部分が切り取られ、見えなくなる。スクロールバーも表示されないため、ユーザーがはみ出した内容にアクセスする手段がなくなる点に注意が必要だ。

scroll

常にスクロールバーが表示される。コンテンツがはみ出していなくてもスクロールバーの領域が確保されるため、レイアウトの安定性は高いが、見た目がやや煩雑になりやすい。

auto

はみ出したときだけスクロールバーが表示される。実務で最もよく使われる値で、必要なときだけスクロール可能にしたい場面に適している。

実際の表示を確認する

overflow: hidden と overflow: auto の違いを確認してみよう。

HTML
CSS
JavaScript
<div class="demo">
  <div class="box hidden-box">
    <p><strong>overflow: hidden</strong></p>
    <p>この文章ははみ出すと切り取られます。長いテキストを入れても、ボックスの外には表示されません。スクロールもできません。</p>
  </div>
  <div class="box auto-box">
    <p><strong>overflow: auto</strong></p>
    <p>この文章ははみ出すとスクロールバーが出ます。長いテキストを入れると、スクロールして全体を読むことができます。</p>
  </div>
</div>
.demo {
  display: flex;
  gap: 16px;
}
.box {
  width: 180px;
  height: 100px;
  border: 2px solid #6366f1;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
}
.hidden-box {
  overflow: hidden;
}
.auto-box {
  overflow: auto;
}

左側の hidden は内容が途切れて読めなくなっているのに対し、右側の auto はスクロールで全文を確認できる。

overflow-x と overflow-y

overflow は横方向（x）と縦方向（y）を個別に指定することもできる。横スクロールだけ許可してコードブロックを表示したいときや、縦スクロールだけ有効にしたいときに便利だ。

.code-block {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

この設定では、横に長いコードはスクロールで確認できるが、縦方向のはみ出しは切り取られる。

overflow: hidden の活用パターン

hidden は単にコンテンツを隠すだけでなく、レイアウトのテクニックとしても使われる。

フロートの解除

親要素に overflow: hidden を指定すると、float した子要素を包むことができる。clearfix の代替手段として古くから利用されてきた。

装飾のはみ出し防止

border-radius で角を丸くした要素に overflow: hidden を指定すると、子要素が角からはみ出さなくなる。カード型 UI で画像の角を丸くする定番の手法だ。

.card {
  border-radius: 12px;
  overflow: hidden;
}
.card img {
  width: 100%;
  display: block;
}

overflow: hidden がないと、画像が border-radius の角を突き抜けて表示されてしまう。

text-overflow との組み合わせ

テキストが長すぎるときに末尾を「…」で省略する表現は、overflow と text-overflow の組み合わせで実現する。

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

この 3 つのプロパティはセットで使うのが定石だ。overflow: hidden でテキストを切り取り、white-space: nowrap で改行を禁止し、text-overflow: ellipsis で省略記号を表示する。1 つでも欠けると期待通りに動作しない。

sticky との関係

overflow と position: sticky の組み合わせには注意が必要だ。親要素に overflow: hidden や overflow: auto が設定されていると、sticky が正常に機能しなくなることがある。sticky を使う場合は、その祖先要素に overflow の指定がないか確認しておくのがトラブルを避けるコツになる。

3 views