CSSのスクロール可能なボックスを作る方法！初心者でもわかるoverflowとheightの使い方

スクロール可能なボックスを作成する方法（overflow + height）

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

生徒

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

先生

「それは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>

ブラウザ表示

4. overflowの主な値の種類

overflowにはいくつかの指定方法があります。

visible：はみ出した部分をそのまま表示する（初期値）
hidden：はみ出した部分を隠す
scroll：はみ出していなくても常にスクロールバーを表示する
auto：はみ出したときだけスクロールバーを表示する

実務ではautoを使うことが多いです。なぜなら、必要なときだけスクロールが出るので、見た目がスッキリするからです。

5. 実際によくある活用例

スクロール可能なボックスは、日常的にいろいろな場面で使われます。

チャットアプリのメッセージ表示エリア
ニュースサイトやブログのサイドバー
管理画面の長いリストやログ表示
プログラミングコードの表示エリア

例えばチャットアプリでは、過去のメッセージがどんどん増えていきますが、表示エリアは一定の高さにしてスクロールで読み返せるようにします。これもoverflowとheightを組み合わせているのです。

6. デザインを整えるポイント

スクロールボックスを使うときに気を付けると便利なポイントを紹介します。

高さ（height）はユーザーが見やすいサイズに調整する
paddingをつけて文字が端にくっつかないようにする
背景色を変えて、スクロールエリアがわかりやすいようにする
レスポンシブデザインと組み合わせてスマホでも使いやすくする

特に初心者の方は、「スクロールが必要になる高さを決めること」が重要です。大きすぎても小さすぎてもユーザーが使いにくいので、内容に合わせて調整しましょう。

まとめ

この記事では、CSSのoverflowとheightを組み合わせたスクロール可能なボックスの作り方を、多くの例とともに丁寧に整理しました。長い文章や大量のリストが画面を圧迫する場面は、日常的なWeb制作でも頻繁に起こります。そのようなとき、overflowを適切に設定すれば、デザインを損なうことなく必要な情報だけを読みやすい形で提示できます。とくにoverflow-yやoverflow-xを使った縦スクロール・横スクロールの実装は、初心者にとって理解しやすく、実務でも使う場面が豊富です。また、scroll・auto・hiddenといった値の違いを知ることで、スクロールの表示タイミングや見え方をコントロールでき、ユーザー体験を向上させることができます。

スクロールエリアは、チャットアプリ、ニュースサイトのサイドバー、ログビューア、コード表示領域など、あらゆるUIに登場します。そのため、overflowとheightは必ず覚えておくべき基本テクニックです。さらに、paddingやbackground-colorを使用することで、より視認性を高めたデザインへと仕上げることができます。今回紹介した例のように、シンプルなCSSだけで視覚的に整ったスクロールボックスを表現できるため、初心者でも安心して活用できます。ここで学んだポイントを組み合わせれば、場面に応じた柔軟なスクロールボックスを作ることができるでしょう。

スクロール可能な例のサンプルコード


<style>
    .summary-scroll-box {
        height: 120px;
        width: 260px;
        padding: 8px;
        border: 1px solid #444;
        overflow-y: auto;
        background: #fafafa;
    }
</style>

<div class="summary-scroll-box">
    ここでは記事全体の振り返りとして、スクロールボックスの具体例を再確認できます。<br>
    overflowとheightの組み合わせを使うことで、長い文章をコンパクトに収めることができます。<br>
    実際の制作現場では、チャット欄・お知らせリスト・ログ一覧など、活用場面は非常に多いです。<br>
    デザインが崩れず、閲覧性も高まるため、多くのUIで採用されています。<br>
    今後CSSレイアウトを学ぶときにも、この仕組みを知っておくと便利です。<br>
    heightを調整しながら、必要に応じてscroll・auto・hiddenを使い分けてみてください。<br>
</div>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「きょうの内容で、スクロールボックスって意外といろいろなところで使われているんだと分かりました！」

先生

「そうですね。特にチャットやログ画面など、情報量が多い場所では欠かせません。overflowとheightを覚えておけば、多くのUIに応用できますよ。」

生徒

「heightで大きさを決めて、overflow-yやoverflow-xでスクロール方向を調整する感じですよね？値の違いも理解できました。」

先生

「その通りです。特にautoは実用でよく使いますし、hiddenはデザインの整理に役立ちます。今回のサンプルコードを自分のページでも試してみると、さらに理解が深まりますよ。」

生徒

「はい！いろいろな高さやデザインで試しながら、スクロールの動きを確認してみます。」