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

生徒

「先生、長い文章やリストを入れたときに、全部がページに表示されてしまってレイアウトが崩れることがあるんですが、どうすればいいですか？」

先生

「それはCSSのoverflowとheightを組み合わせれば解決できますよ。ボックスの高さを決めて、中身がはみ出したらスクロールできるようにする方法です。」

生徒

「なるほど！スクロールできる箱を作れるんですね。」

先生

「はい、それでは実際の例を見てみましょう。」

1. overflowとheightの基本

CSSのoverflowは「要素の中身がはみ出したときにどう処理するか」を決めるプロパティです。
一方、heightは「要素の高さ」を指定するプロパティです。
この2つを組み合わせると、決まった高さの中にコンテンツを収めて、はみ出した部分をスクロールできるようにできます。

例えば日記帳を思い浮かべてください。1ページの大きさは決まっています。そこに文章を書きすぎると、はみ出した部分は見えなくなってしまいますよね。そこで、スクロールという「めくる仕組み」をつけることで、全部の文章を読むことができるようになるのです。

2. 縦スクロールができるボックスの作り方

最も基本的な使い方は、overflow-y: scroll;とheightを組み合わせる方法です。こうすると、縦方向にスクロールできるボックスを作れます。


<style>
    .scroll-box {
        height: 100px;
        width: 200px;
        border: 1px solid #333;
        overflow-y: scroll;
        padding: 5px;
    }
</style>

<div class="scroll-box">
    1行目のテキストです。<br>
    2行目のテキストです。<br>
    3行目のテキストです。<br>
    4行目のテキストです。<br>
    5行目のテキストです。<br>
    6行目のテキストです。<br>
    7行目のテキストです。<br>
</div>

ブラウザ表示

3. 横スクロールのボックス

横方向に長いテキストや画像を入れるときは、overflow-xを使います。表やコードを横にスクロールできるようにするときによく使います。


<style>
    .scroll-x-box {
        width: 200px;
        border: 1px solid #666;
        overflow-x: scroll;
        white-space: nowrap;
    }
</style>

<div class="scroll-x-box">
    横に長いテキストを表示します。スクロールして続きを確認してください。
</div>

ブラウザ表示