Overflow：Scroll、Clip、Auto
overflowプロパティを使って、コンテンツがコンテナーを超えたときの動作を制御します。
「Overflow：Scroll、Clip、Auto」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
オーバーフローとは
オーバーフローは、要素のコンテンツが定義された寸法より大きい場合に発生します。overflowプロパティは、この余分なコンテンツをどう扱うかを制御します。
overflow: visible（デフォルト）
デフォルトでは、要素のボックスからはみ出したコンテンツも外側に表示されます。その結果、兄弟要素と重なったり、ビューポートからはみ出したりすることがあります。
<div class="box">This text is long enough to spill outside the box edges visibly.</div>
overflow: hidden
overflow: hiddenは、要素の境界を越えたコンテンツをすべて切り取ります。切り取られたコンテンツにはアクセスできず、スクロールもできません。
<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>
overflow: scroll
overflow: scrollは、コンテンツが収まっている場合でも常にスクロールバーを表示します。コンテンツのサイズにかかわらず、一貫したUIにしたい場合に使用します。
<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>
overflow: auto
overflow: autoは、コンテンツが実際にはみ出した場合にだけスクロールバーを表示します。不要なスクロールバー用の余白を避けられるため、通常はscrollよりこちらが推奨されます。
<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>
overflow: clip
overflow: clipはhiddenに似ていますが、より強力です。ブロックフォーマッティングコンテキストを作成せず、JavaScriptからスクロールすることもできません。パフォーマンスへの影響を抑えてクリッピングしたい場合に適しています。
<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>
overflow-x と overflow-y
各軸を個別に制御できます。コードやテーブルなど幅の広いコンテンツを横スクロールできるようにするのが一般的です。
<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>
スクロール可能なコンテナのパターン
スクロール可能なコンテナを作成するには、固定の高さと overflow: auto または scroll の両方が必要です。
<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>
overflow によるブロックフォーマットコンテキスト
overflow に visible 以外の値を設定すると、ブロックフォーマットコンテキスト（BFC）が作成されます。これにより内部のフロートがコンテナ内に収まり、マージンの相殺がコンテナの外へ及ぶのを防げます。
スクロールチェーン
スクロール可能なコンテナを限界までスクロールすると、スクロールイベントが親要素へ「チェーン」されることがあります。これを防ぐには overscroll-behavior: contain を使用します。
<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>
text-overflow と overflow の違い
text-overflow: ellipsis は要素内のテキストに関するもので、機能させるには overflow: hidden と white-space: nowrap の併用が必要です。overflow は要素自体のオーバーフロー動作を制御します。
理解度チェック
コンテンツが実際にオーバーフローした場合にのみスクロールバーを表示する overflow の値はどれですか。
まとめ
overflow: hidden はコンテンツを切り取ります。overflow: auto は必要な場合にのみスクロールバーを追加します（推奨）。overflow: scroll は常にスクロールバーを表示します。overflow: clip は新しいフォーマットコンテキストを作成せずにコンテンツを切り取ります。軸ごとに制御するには overflow-x/y を使用します。
よくある質問
「Overflow：Scroll、Clip、Auto」レッスンは無料ですか？
はい。「Overflow：Scroll、Clip、Auto」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Overflow：Scroll、Clip、Auto」で何を学びますか？
overflowプロパティを使って、コンテンツがコンテナーを超えたときの動作を制御します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Overflow：Scroll、Clip、Auto」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Block、Inline、Inline-Block
- VisibilityとDisplay None
- Overflow：Scroll、Clip、Auto
- CSS ResetとNormalize