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

生徒

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

先生

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

生徒

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

先生

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

生徒

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

先生

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

1. overflowとは？溢れたコンテンツの処理ルール

CSSのoverflow（オーバーフロー）プロパティは、日本語で「溢れる」という意味の通り、親要素（ボックス）のサイズを中身のコンテンツが超えてしまった際に、どのように表示・処理するかを制御するための重要なプロパティです。

Web制作の現場では、スマホで見るときに文字がはみ出したり、画像がデザインを突き破ってしまったりすることがよくあります。そんな時、「はみ出た分を隠すのか」「スクロールさせて見せるのか」を指示することで、ユーザーにとって使いやすく、見た目が整ったレイアウトを保つことができます。

初心者向けのイメージ：
「150mlしか入らないコップに、200mlの水を注いだとき」を想像してみてください。溢れた水をそのまま床にこぼすのか（visible）、溢れた分を無かったことにするのか（hidden）、あるいは大きな容器に替えて自由に飲めるようにするのか（scroll/auto）。このルール決めがoverflowの役割です。


<style>
    /* 親要素（箱）の設定 */
    .parent-box {
        width: 150px;
        height: 100px;
        background-color: #f8f9fa;
        border: 2px dashed #6c757d;
        /* ここにoverflowを指定します（未指定はvisible） */
    }

    /* 中身の画像（箱より大きいサイズ） */
    .child-content {
        width: 200px;
        height: 150px;
        opacity: 0.7;
    }
</style>

<div class="parent-box">
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="child-content">
</div>

ブラウザ表示

上のサンプルでは、点線の枠（150x100）に対して、中の画像（200x150）が大きいため、右側と下側にはみ出しています。これが「オーバーフロー」している状態です。ここから具体的に、visible、hidden、scroll、autoの4つの値を使って、このはみ出しをどう料理していくかを詳しく解説していきます。

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