CSS入門:スクロールバーをカスタマイズする方法

    • このページをはてなブックマークに追加

    公開日:2016年12月05日 最終更新日:2019年09月27日

    ボックス内のテキストが枠の大きさを超えた時に表示するスクロールバーの表示と非表示の方法について解説します。

    目次

    1. スクロールバーを表示する方法

    1.1. スクロールバーを常に表示する【 overflow: scroll 】

    ボックス内のテキストがその領域に収まらない場合、「overflow」プロパティを使うと、スクロールバーを表示することができます。値に "scroll" を指定すると常にスクロールバーを表示します。「scroll1.html」をコピーしてPC上の任意の場所に保存して下さい。ファイルの種類を「UTF-8」にして保存します。

    ●基本の書式

    ●scroll1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>CSS入門-スクロールバーの表示/非表示</title>
    </head>
    <style>
    div{
    width:300px;
    height:150px;
    border: 2px solid #666666;
    overflow: scroll;
    }
    </style>
    <body>
    <h1>スクロールバー</h1>
    <div>
    <p>ボックスに表示される内容です。</p>
    </div>
    </body>
    </html>

    CSSでは幅(width)が300px、高さ(height)が150pxのボックスを作成し、分かりやすく境界線(border)をつけています。ボックス内のテキストの長さに関わらず、ボックスの右側と下にスクロールバーが表示されます。ページのレイアウト上限られた表示領域の中で、ある程度の量のテキストを表示したい時に使うと便利です。

    ●ブラウザーの表示

    scroll1

    ▲ページトップへ戻る

    1.2. スクロールバーを規定通りに表示する【 overflow: visible 】

    「overflow」プロパティ"visible" を指定するとボックスの領域からあふれたテキストは規定どおりそのまま表示されます。

    ●scroll2.html

    ・・・省略・・・
    <style>
    div{
    width:300px;
    height:150px;
    border: 2px solid #666666;
    overflow: visible;
    }
    </style>
    <body>
    <h1>スクロールバー</h1>
    <div>
    <p>ボックスに表示される内容です。</p>
    <p>「スクロールバー」の表示と非表示の方法を解説します。</p>
    <p>「overflow」プロパティを使うと「スクロールバー」の表示を調整することができます。</p>
    </div>
    </body>
    </html>

    "visible"を指定した場合、ブラウザーによって見え方が違ってきます。「Google Chrome」や「FireFox」では、ボックス内に収まらないテキストはボックスの境界線を越えて表示されます。

    ●ブラウザーの表示(Chrome)

    scroll2

    「IE(Internet Exploler)」や「Opera」では、テキストがボックス内に収まらない場合、ボックスの境界線がテキストに合わせて拡張されます。"visible"以外の"scroll "や"auto"の表示は変わりありません。ブラウザーに依存する表示のため、ボックスの大きさが変わるとレイアウトが崩れるようなページに使うのはあまりよくない設定です。

    ●ブラウザーの表示(IE)

    scroll5

    ▲ページトップへ戻る

    1.3. スクロールバーを自動で表示する【 overflow: auto 】

    「overflow」プロパティ"auto"を指定すると、ボックス内のテキストがあふれた場合に自動でスクロールバーを表示します。

    ●scroll3.html

    ・・・省略・・・
    <style>
    div{
    width:300px;
    height:150px;
    border: 2px solid #666666;
    overflow: auto;
    }
    </style>
    <body>
    <h1>スクロールバー</h1>
    <div>
    <p>ボックスに表示される内容です。</p>
    <p>「スクロールバー」の表示と非表示の方法を解説します。</p>
    <p>「overflow」プロパティを使うと「スクロールバー」の表示を調整することができます。</p>
    </div>
    </body>
    </html>

    縦方向にテキストがあふれると右側にスクロールバーが自動で表示されます。

    ●ブラウザーの表示

    scroll3

    ▲ページトップへ戻る

    2. スクロールバーを非表示にする方法 【 overflow: hidden 】

    「overflow」プロパティ"hidden"を指定すると、ボックス内のテキストがあふれた場合でもスクロールバーを表示しません。この場合ボックスからあふれた分のテキストも表示されません。

    ●scroll3.html

    ・・・省略・・・
    <style>
    div{
    width:300px;
    height:150px;
    border: 2px solid #666666;
    overflow: hidden;
    }
    </style>
    <body>
    <h1>スクロールバー</h1>
    <div>
    <p>ボックスに表示される内容です。</p>
    <p>「スクロールバー」の表示と非表示の方法を解説します。</p>
    <p>「overflow」プロパティを使うと「スクロールバー」の表示を調整することができます。</p>
    </div>
    </body>
    </html>

    "hidden"を設定すると内容により表示されない部分がでてくるので使い方には気をつけましょう。あまり使い道がない設定に見えますが、画像とテキストとを配置しテキストの回り込みを調整する場合などに使ったりします。

    ●ブラウザーの表示

    scroll4

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java】プログラマー|WEBアプリケーションの開発

    年収 :300万円〜600万円

    弊社で支援しているWEBアプリケーションの開発をご担当いただきます。言語的にはJava、ASP.NET(C#)、PHP...

    株式会社SYNC

    正社員

    【PHP】WEBエンジニア|アパレルサイトの開発

    年収 :350万円〜

    アパレル、食品ECサイトなどの開発

    株式会社LOWCAL

    フリーランス

    【Ruby on Rails/HTML/CSS】サーバーサイドエンジニア★BtoBマッチングSaaS開発

    同社は決裁者向けのマッチングプラットフォームを展開する企業です。 今回はBtoBマッチングSaaSの開発...

    フリーランス

    【Java(Spring Boot)/React/HTML/JavaScript他】フルスタックエンジニア★セキュリティ関連企業向け新規サービス開発

    月額単価 :70万円〜80万円

    同社はWebシステムやスマフォアプリ開発を得意とする受託開発企業です。 今回は大手セキュリティ関連企...