overflowを使ってhtmlにスクロールバーの表示・非表示を操作する方法

2024.01.04

「HTMLのボックスにスクロールバーを表示したり、非表示にする方法ってどうやるんだろう？」

このように悩んでいる方もいるのではないでしょうか。

ボックスからはみ出た要素を非表示にしたり、スクロールバーを設定して表示したりと用途に合わせて操作できるようになりたいですよね。

CSSのプロパティであるoverflowを使うと、HTMLにスクロールバーを表示したり、非表示にすることが可能です。

今回、DMM WEBCAMP MEDIAは、HTMLで作られたボックスにスクロールバーの表示・非表示を操作する方法について解説します。

overflowプロパティとは
スクロールバーの操作方法

以上の項目に沿って説明します。

この記事を読むことで、overflowプロパティの使い方を理解し、スクロールバーの表示・非表示を自在に操作できるようになるので、ぜひチェックしてみてください！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

HTMLにスクロールバーを実装するoverflowプロパティとは

HTMLコーディングしていると、次のように要素からはみ出してしまうことはありませんか？

HTMLにスクロールバーを実装して要素がはみ出るのを防ぐには、CSSのプロパティであるoverflowを使用します。

overflowとは、ボックスからはみ出てしまう要素の処理方法を決められるプロパティです。

指定した値を変えることで、はみ出た要素を非表示にしたりスクロールバーを表示できたりと使用を変更できます。

overflowプロパティに指定できる値は、主に下記の3つです。

visible：overflowプロパティの初期値で、はみ出た要素がそのまま表示される。
hidden：はみ出た要素を非表示にする。
scroll：要素がはみ出るとスクロールバーが表示される。

それぞれの使い方をサンプルコードを用いて解説します。

visibleのサンプルコード

visibleはoverflowの初期値なので、指定しなくても動作に変わりはありません。visibleの特徴として、widthを指定しても横にはみ出ることはありませんが、heightを指定すると縦にはみ出ます。

横にはみ出ない理由は、横にはみ出ることなく、自動折り返し処理を行う「white-space: nomal;」がHTMLの初期値として設定されているためです。

heightを指定しなければ、ボックス内に要素を収めることが可能です。

サンプルコード

HTML

<body>
    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 1px solid;
            overflow: visible;
            margin-right: 30px;
        }
        .hoge{
            width: 100px;
            border: 1px solid;
        }
        .flex{
            display: flex;
        }
    </style>
    <div class="flex">
        <p class="test">テストテストテストテストテストテストテストテストテストテストテスト</p>
        <p class="hoge">テストテストテストテストテストテストテストテストテストテストテスト</p>    
    </div>
</body>

実行結果

上記のように、heightを指定している左のボックスは要素がはみ出ていますが、指定していない右ボックスははみ出ることなく格納されています。

hiddenのサンプルコード

hiddenを指定するとはみ出た要素を非表示になりますが、スクロールバーが表示されない点に注意しましょう。

サンプルコード

HTML

<body>
    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 1px solid;
            overflow: hidden;
        }
    </style>
        <p class="test">テストテストテストテストテストテストテストテストテストテストテスト</p>
</body>

実行結果

scrollはスクロールバーを表示する

scrollを指定すると、親要素からはみ出た部分が非表示になり、スクロールすることで現れるようになります。

スクロールバーのデザインや表示されるタイミングはブラウザによって違います。

たとえば、Windowsの場合はスクロールバーが表示されますが、他のブラウザでは、要素をスクロールして初めてスクロールバーが表示されるという仕組みです。

サンプルコード

HTML

<body>
    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 1px solid;
            overflow: scroll;
        }
    </style>
        <p class="test">テストテストテストテストテストテストテストテストテストテストテスト</p>
</body>

実行結果

上記のように、要素の右側にスクロールバーが表示されます。

overflowプロパティを利用すると、scrollを指定してスクロールバーを表示させたり、hiddenを指定して非表示にすることができます。

未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！

✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！

＼実践的なスキルが身に付くカリキュラム／

今すぐ詳細を見る！

スクロールバーの位置別に操作する方法

overflowには、overflow-xとoverflow-yという種類もあります。overflow-xはスクロールバーの横軸を、overflow-yは縦軸の処理方法を操作できます。

これらのプロパティを使用すると、スクロールバーの位置別に操作が可能です。サンプルコードの動きを見ながら確認していきましょう。

HTML

<body>
    <style>
        .test,.hoge{
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
       .test{
            white-space: nowrap;
            overflow-x: scroll;
        }
          .hoge{
            overflow-y: scroll;
        }      
    </style>
        <p class="test">テストテストテストテストテストテストテストテストテストテストテスト</p>
　　　　 <p class="hoge">テストテストテストテストテストテストテストテストテストテストテスト</p>
</body>

testクラスに「white-space: nowrap;」を指定することで横幅の自動改行を解除し、「overflow-x: scroll;」で横にスクロールする仕様です。

hogeクラスには「overflow-y: scroll;」を指定し、縦のスクロールバーを表示しています。

実行結果

overflowプロパティを使ってスクロールバーを自在に操作しよう

今回、DMM WEBCAMP MEDIAでは、HTMLで作られたボックスにスクロールバーの表示・非表示を操作する方法について解説しましたが、いかがでしたでしょうか？

overflowプロパティと値の種類は下記になります。

プロパティの種類

overflow：はみ出た要素全体を操作する
overflow-x：はみ出た要素の横軸を操作する
overflow-y：はみ出た要素の縦軸を操作する

値の種類

visible：はみ出た要素がそのまま表示される。
hidden：はみ出た要素を非表示にする。
scroll：要素がはみ出るとスクロールバーが表示される。

overflowプロパティの使い方を理解することで、スクロールバーを自在に操作できるので、この記事をきっかけに利用してみるとよいでしょう。

ぜひ参考にしてみてくださいね！

【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！

✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート

＼目的別で選べる3つのコース／

あなたの適正コースを診断！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

【初心者向け】HTMLでナビゲーションを作る方法とは？nav要素の特徴も解説

2024.01.24

HTMLで右寄せする方法を紹介！　

2024.01.06

富山県おすすめのプログラミングスクール5選【子ども・社会人・シニア必見】

2024.01.29

【子ども/学生/大人】宮城県のプログラミング教室・スクール厳選５選

2024.01.29

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする