zukucode
主にWEB関連の情報を技術メモとして発信しています。

CSS 要素が入り切らない場合にスクロールバーを表示する方法

要素が入り切らずにはみ出してしまうときにスクロールバーを表示する方法を紹介します。

以下のように、サイズを指定した親要素の中に、入り切らないテキストなどがあると、親要素をはみ出してしまいます。

<div style="width: 300px; height: 100px; background-color: yellow;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

overflowのスタイルを指定すると、親要素をはみ出した分をどのように表示するかを指定することができます。

visible
そのまま表示(初期値)
scroll
常にスクロールバーを表示
auto
はみ出すときだけスクロールバーを表示
hidden
非表示

visible

overflowの初期値です。overflowのスタイルを設定しない場合はvisibleとして扱われます。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: visible;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

scroll

scrollを指定すると、親要素にスクロールバーが表示されます。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: scroll;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

scrollを指定した場合は、親要素をはみ出すかどうかにかかわらず、常にスクロールバーが表示されます。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: scroll;">
    短い文章
</div>

auto

親要素をはみ出す場合のみスクロールバーを表示させたい場合はautoを指定します。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: auto;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

親要素がはみ出さない場合はスクロールバーは表示されません。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: auto;">
    短い文章
</div>

hidden

親要素をはみ出した分は非表示にしたい場合はhiddenを指定します。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: hidden;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

まとめ

overflowのスタイルでスクロールバーの制御を行うことができました。

横と縦のスクロールバーをそれぞれ別に制御したい場合はoverflow-xまたはoverflow-yのスタイルを使用します。

具体的な方法はCSS 縦または横のみにスクロールバーを表示する方法で紹介しています。


関連記事

  • CSS 要素の背景色を透明・半透明にする方法

    要素の背景色を透明・半透明にする方法を紹介します。例えば、以下のように緑背景にボタンを置いた場合を考えます。ボタンの背景色を透明にして、文字だけにしたい場合は以下のようにします。transparent...


  • CSS transitionでスタイルの変化をアニメーションする

    transitionを使って、スタイルの変化をアニメーションで表現する方法を紹介します。例えば以下のように、マウスオーバーすると擬似クラスが適用されて横幅が伸びる要素があるとします。このときの横幅の変...


  • CSS テーブルのセル内の文字列の折り返しの制御を行う方法

    テーブルのセル内の文字列の折り返しの制御を行う方法を紹介します。以下は、セルの幅を200pxに指定しているのですが、半角英数字の長い文字列があると、セルの幅を無視してセルが伸びてしまいます。テーブルの...


  • CSS テーブルのセルで入りきらない文字列をカットして表示する

    CSSでテーブルのセルで入りきらない文字列をカットして表示する方法を紹介します。以下のようなtableのとき、tdの要素に対して以下のようにスタイルを設定します。white-space: nowrap...


  • CSS テーブルのセルの中身を文字寄せする方法

    テーブルのセルの中身を文字寄せする方法を紹介します。文字寄せするスタイルはtext-alignやvertical-alignを使用しますが、テーブルのセルの場合でも同じように指定します。以下のようなテ...


  • CSS 縦または横のみにスクロールバーを表示する方法

    要素が入り切らずにはみ出してしまうときにスクロールバーを表示する方法をCSS 要素が入り切らない場合にスクロールバーを表示する方法で紹介しました。overflowのスタイルは縦と横の両方のスクロールバ...


  • CSS ローディングアニメーションを作成する

    CSSのスタイルのみでローディングアニメーションを作成する方法を紹介します。以下のようなローディングアニメーションを作成します。適用しているスタイルを1つづつ解説します。まずはローディングアニメーショ...


  • CSS リンクボタンの下線を消す方法

    リンクボタンの下線を消す方法を紹介します。以下は何もスタイルを指定していない状態のリンクボタンです。ブラウザによって多少は異なりますが、青色で下線の付いたテキストになります。文字に下線を付けるスタイル...


  • テキストボックスの幅を100%にしたときに親要素からはみ出る問題を解決する

    CSSでテキストボックスの幅を100%にしたときに親要素からはみ出る問題を解決する方法を紹介します。以下のように、親要素に対して100%のサイズのテキストボックスを配置すると、親要素をはみ出してしまい...


  • CSS テキストボックスのサイズを設定する

    CSSでテキストボックスのサイズを設定する方法を紹介します。サイズを設定するには以下のように、テキストボックスの要素に対してwidth: サイズ;とheight: サイズ;の形式で指定します。親要素の...