先生と生徒の会話形式で理解しよう

生徒

「先生、CSSのoverflowってよく見かけるんですけど、どういう意味なんですか？」

先生

「overflowは、ボックスの中に入りきらない文字や画像をどう表示するかを決めるプロパティです。」

生徒

「入りきらないって、例えばどんなときに起きるんですか？」

先生

「例えば、幅100ピクセルの箱の中に200ピクセルの文章を入れたら、はみ出してしまいますよね。そのときにどうするかを指定するのがoverflowなんです。」

生徒

「なるほど！具体的にはどんな種類があるんですか？」

先生

「主に4種類あって、visible・hidden・scroll・autoです。それぞれの特徴を順番に見ていきましょう。」

1. overflowとは？

CSSのoverflowプロパティは、要素（ボックス）のサイズより中身が大きいときに、はみ出した部分をどう処理するかを決めます。たとえば、文章や画像がボックスから飛び出したときに「見えるようにするか」「隠すか」「スクロールさせるか」を選べるのです。

overflowは、Webページのレイアウトを整えるときにとても役立つCSSの基本プロパティです。特に、テキストが長くなりすぎたり、画像が想定以上に大きかったときにデザインが崩れるのを防ぐために使います。

2. visible（デフォルト設定）

visibleは、はみ出した内容をそのまま表示する設定です。overflowを指定しなかった場合も、この状態になります。


<style>
.box {
    width: 150px;
    height: 100px;
    border: 2px solid blue;
    overflow: visible;
}
</style>

<div class="box">
とても長い文章が入っています。この文章は箱からはみ出します。
</div>

ブラウザ表示

このように、visibleではボックスの外にはみ出してもそのまま見える状態になります。文章が飛び出してもOKなときは使えますが、デザインが崩れる可能性もあります。

3. hidden（はみ出しを隠す）

hiddenは、はみ出した部分を非表示にする設定です。見えるのはボックスの中だけで、外にはみ出した部分は消えて見えなくなります。


<style>
.box {
    width: 150px;
    height: 100px;
    border: 2px solid green;
    overflow: hidden;
}
</style>

<div class="box">
とても長い文章が入っています。この文章は箱からはみ出します。
</div>

ブラウザ表示

hiddenを使うと、不要な部分をスッキリ隠せます。ただし、隠した部分をスクロールして見ることはできません。

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

scrollは、はみ出したかどうかに関係なくスクロールバーを表示する設定です。ユーザーが自由にスクロールして中身を確認できます。


<style>
.box {
    width: 150px;
    height: 100px;
    border: 2px solid red;
    overflow: scroll;
}
</style>

<div class="box">
とても長い文章が入っています。この文章は箱からはみ出します。
</div>

ブラウザ表示

scrollは、中身が収まっていても常にスクロールバーが表示されるので、ユーザーに「スクロールできる」ということがわかりやすい反面、少し不自然に見えることもあります。

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

autoは、はみ出したときだけスクロールバーを表示する設定です。overflowの中では一番よく使われることが多いです。


<style>
.box {
    width: 150px;
    height: 100px;
    border: 2px solid orange;
    overflow: auto;
}
</style>

<div class="box">
とても長い文章が入っています。この文章は箱からはみ出します。
</div>

ブラウザ表示

autoは、必要なときだけスクロールバーが出るので、見た目も自然で使いやすいです。ニュース記事やチャットボックスなど、文章が長くなる可能性があるときによく使われます。