← カテゴリ一覧に戻る

はみ出し処理（overflow）

overflowoverflow-xoverflow-yoverflow-clip-margin

要素のコンテンツが指定されたサイズを超えた場合の表示方法を制御します。スクロール、切り取り、はみ出しを許可するかをコンテンツの性質に合わせて選択できます。

デモ：overflow の各値

visible（デフォルト）

はみ出す

hidden

切り取り

scroll

常にスクロールバー

auto

必要時のみ

カスタムスクロールバーのデモ（::-webkit-scrollbar）

スクロールバーがカスタマイズされています。紫色のスクロールバーが右側に表示されています。 コンテンツが長い場合にスクロールが有効になります。ここにはたくさんのテキストが含まれており、 スクロールが必要な状態を作り出しています。さらにテキストが続きます。 ::-webkit-scrollbar 疑似要素を使用してスタイリングしています。 scrollbar-color と scrollbar-width プロパティも標準化されています。

コード例

/* overflow の主な値 */
.visible  { overflow: visible; }  /* はみ出す（デフォルト） */
.hidden   { overflow: hidden; }   /* 切り取り */
.scroll   { overflow: scroll; }   /* 常にスクロールバー */
.auto     { overflow: auto; }     /* 必要時のみスクロールバー */
.clip     { overflow: clip; }     /* 切り取り（スクロールコンテナ非作成）*/

/* 軸別指定 */
.x-scroll { overflow-x: auto; overflow-y: hidden; }
.y-scroll { overflow-x: hidden; overflow-y: auto; }

/* scrollbar-gutter — スクロールバー分のスペース予約（2021） */
.stable { scrollbar-gutter: stable; }

/* CSS標準スクロールバースタイリング */
.element {
  scrollbar-width: thin;           /* none | thin | auto */
  scrollbar-color: #6366f1 #f1f5f9; /* thumb track */
}

/* WebKit スクロールバー（Chromium系） */
.element::-webkit-scrollbar { width: 8px; }
.element::-webkit-scrollbar-track { background: #f1f5f9; }
.element::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 4px; }

/* overflow: clip + overflow-clip-margin */
.clipped {
  overflow: clip;
  overflow-clip-margin: 16px; /* クリップ位置を外側にずらす */
}

比較：overflow: hidden vs clip / scroll vs auto

観点overflow: hiddenoverflow: clipoverflow: scrolloverflow: auto
コンテンツのクリップ✅ する✅ する（より厳密）✅ する✅ する
スクロールコンテナ作成✅ 作成する❌ 作成しない✅ 作成する✅ 作成する
スクロール伝播あり得る❌ なしありあり
スクロールバー表示❌ なし❌ なし常に表示必要時のみ
主な用途画像・カードパフォーマンス重視常にスクロール必要な場所一般的なコンテナ

NEWoverflow: clip（2022）と scrollbar-gutter（2021）

overflow: clip は hidden より厳密なクリップで、スクロールコンテナを作らないためスクロール伝播も起きません。scrollbar-gutter: stable はスクロールバー出現時のレイアウトシフトを防ぎます。

/* overflow: clip — スクロールコンテナを作らない厳密なクリップ */
.strict-clip {
  overflow: clip;
  overflow-clip-margin: content-box 8px; /* クリップ位置の調整 */
}

/* scrollbar-gutter — スクロールバー出現時のレイアウトシフト防止 */
.no-shift {
  overflow-y: auto;
  scrollbar-gutter: stable; /* スクロールバー分のスペースを常に確保 */
}

/* CSS標準スクロールバーは現在すべての主要ブラウザで対応 */
.modern-scrollbar {
  scrollbar-width: thin;            /* Firefox / Chrome 121+ */
  scrollbar-color: #6366f1 #f1f5f9; /* Firefox / Chrome 121+ */
}

scrollbar-color と scrollbar-width はChrome 121+（2024年1月）から標準サポート。::-webkit-scrollbar 不要で記述できます。

🤖 AIプロンプトテンプレート

CSSのoverflowプロパティを使ったコンテンツ制御の実装例をReact + Tailwind CSSで作成してください。

要件:
- visible / hidden / scroll / auto / clip の各値の違いを並べて視覚的に比較するデモ
- overflow-x / overflow-y を個別指定した横スクロールリスト・縦スクロールリストの実装
- カスタムスクロールバー（scrollbar-width / scrollbar-color / ::-webkit-scrollbar）のスタイリング例
- overflow: clip と overflow: hidden の違い（スクロールコンテナの有無）を比較するデモ
- scrollbar-gutter: stable でスクロールバー出現時のレイアウトシフトを防ぐ実装
- 実用例：スクロール可能なカードリスト・コード表示エリア

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo