【CSS】overflowの使い方：hiddenやscrollの違いは？

今回はCSSのoverflowと呼ばれるプロパティの使い方をまとめて解説します。

1. CSSのoverflowとは？

overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定します。 プロパティとは？書き方は以下のようになります。

.sample { overflow: visible; }

.sampleの部分はセレクタです。overflowを指定したい要素のclass名などを書きます。

overflowの主な5つの値

ここではvisible・hidden・clip・scroll・autoの主な5つを扱います。overflowには横方向と縦方向を別々に書く方法もあります。

いきなり値を並べられてもしっくり来ないと思うので、１つずつ解説していきます。

2. overflow: visibleでそのまま表示

overflow: visibleでは、基本的にはみ出た内容がそのまま見えます。旧画像は50px四方の例です。下の動く見本はスクロールや切り取りの違いを見やすくするため、幅120px・高さ65pxにしています。

HTMLコード

<p class="overflow-demo">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>

CSSコード

.overflow-demo { width: 120px; height: 65px; overflow: visible; background: skyblue; }

ブラウザ表示

青色のボックスからはみ出てしまいました。上の例ではCSSでoverflow: visibleとしていますが、visibleは初期値なので、この部分が書かれていなくても同じ表示になります。

2-1. heightを指定しなければはみ出ない

さきほどの動く見本ではheight: 65pxにしました。heightを指定しなければどうなるでしょうか。

HTMLコード

<p class="overflow-demo">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>

CSSコード

.overflow-demo { width: 120px; overflow: visible; background: skyblue; }

ブラウザ表示

この例ではheightを指定しない（auto）ため、ボックスが文章に合わせて縦に伸び、縦方向にはみ出ません。横方向の結果は折り返しの設定にもよります。

2-2. 横にはみ出てしまった文字を折り返したいときは？

さきほどの例では縦にはみ出ていましたが、横にはきちんと収まっていました。しかし、もしwhite-spaceという行の折り返しを決めるプロパティで、nowrap（自動的に改行しない）を指定していると、横にはみ出るようになります。実際にコードを書いてみます。

HTMLコード

<p class="overflow-demo">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>

CSSコード

.overflow-demo { white-space: nowrap; width: 120px; overflow: visible; background: skyblue; }

ブラウザ表示

white-space: nowrapでは通常の折り返しをしないので、この例の文字列は右にはみ出します。通常の折り返しに戻すならwhite-space: normalです。ただし長い連続文字列などは、それだけでは収まらないこともあります。詳しくは次の記事をご覧ください。

3. overflow: hiddenで非表示に

overflow: hiddenはボックスからはみ出た部分を切り取って隠し、通常のスクロールバーを出しません。見本では文章の後半が見えなくなります。

HTMLコード

<p class="overflow-demo">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>

CSSコード

.overflow-demo { width: 120px; height: 65px; overflow: hidden; background: skyblue; }

ブラウザ表示

hiddenでもスクロールコンテナになるため、JavaScriptや隠れた要素へのフォーカス移動でスクロールできます。プログラムからもスクロールさせたくない場合はoverflow: clipを使います。clipで重要な内容やフォーカスできる操作を隠さないようにしてください。

<p class="overflow-demo">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>

.overflow-demo { width: 120px; height: 65px; overflow: clip; background: skyblue; }

4. overflow: scrollでスクロールできるように

overflow: scrollを指定すると、内容が収まっていてもスクロールコンテナになります。はみ出た部分は切り取られ、スクロールして読めます。見本はクリックまたはTabキーで選び、マウス・タッチ・矢印キーでスクロールできます。スクロールバーの表示方法はOSやブラウザの設定で変わります。

HTMLコード

<p class="overflow-demo" tabindex="0" role="region" aria-label="縦横スクロールの見本">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>

CSSコード

.overflow-demo { width: 120px; height: 65px; overflow: scroll; background: skyblue; }
.overflow-demo:focus-visible { outline: 2px solid #333; }

ブラウザ表示

このようにはみ出た部分をスクロールにより表示できます。

4-1.ブラウザごとのスクロールバー表示の違い

次の表とGIFは記事公開当時のIE・Windows・Mac・モバイル端末でのスクロールバー表示例です。現在の見た目はOSやブラウザの設定でも変わるため、固定的な比較表としては使わないでください。

環境	当時のスクロールバー表示
IE（Windows）
Mac
iPhone
Android

当時のWindowsとMac・モバイル端末では、スクロールバーの見え方が異なりました。現在も常時表示か操作時だけ表示かは環境や利用者の設定に左右されます。必要な内容をスクロール操作なしで確認できる方法も考えましょう。

4-2.横方向にスクロールできるようにする

横方向にだけスクロールさせたいときは、white-space: nowrapで行を折り返さず、overflow-x: autoを指定します。見本を左右にスクロールしてみてください。

<p class="overflow-demo" tabindex="0" role="region" aria-label="横スクロールの見本">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>

.overflow-demo { box-sizing: border-box; white-space: nowrap; overflow-x: auto; overflow-y: hidden; width: 150px; height: 64px; padding: 4px 4px 14px; background: skyblue; }
.overflow-demo:focus-visible { outline: 2px solid #333; }

4-3.使わないスクロールバーを非表示に

ここまでの例は、縦または横の一方向だけに内容がはみ出しています。古いスクロールバーの表示では、使わない側にもバーが見えることがありました。

この画像は当時のIE/Windowsの例で、縦横の両方にスクロールバーが表示されています。現在のOSではバーを重ねて表示したり自動で隠したりするため、同じ表示とは限りません。

overflow-xとoverflow-yの使い方

そんなときはoverflowの代わりに以下の２つのプロパティを使います。

overflow-xとoverflow-yには同じ主な値を指定できます。ただし片方がhidden・scroll・autoなどの場合、もう片方のvisibleは算出値がautoに、clipはhiddenになります。縦横を別々に指定した結果を実画面で確かめましょう。

縦方向をスクロール可能にし、横方向のスクロールバーを隠す例です。ボックス内を上下にスクロールしてみてください。

HTMLコード

<p class="overflow-demo" tabindex="0" role="region" aria-label="縦スクロールの見本">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>

CSSコード

.overflow-demo { overflow-y: scroll; overflow-x: hidden; width: 150px; height: 65px; background: skyblue; }
.overflow-demo:focus-visible { outline: 2px solid #333; }

ブラウザ表示

overflow-x: hiddenで横方向のスクロールバーを隠し、overflow-y: scrollで縦方向をスクロールできます。ただしhiddenもプログラムからはスクロール可能です。visibleを指定しても、この組み合わせでは算出値がautoとなり、同じ意味にはなりません。

5. overflow: autoとは？

overflow: autoは内容がはみ出したときにスクロールコンテナとなり、必要な方向のスクロールバーを表示します。scrollは内容が収まっていてもスクロールコンテナになる点が異なります。バーの見た目は環境によります。

HTMLコード

<p class="overflow-demo" tabindex="0" role="region" aria-label="自動スクロールの見本">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>

CSSコード

.overflow-demo { width: 120px; height: 65px; overflow: auto; background: skyblue; }
.overflow-demo:focus-visible { outline: 2px solid #333; }

ブラウザ表示

この例では縦方向に内容があふれるため、autoでも上下にスクロールできます。内容が収まる場合、autoのスクロールバーは不要です。

6. 最後に

このようにoverflowやoverflow-x、overflow-yによりはみ出た部分の処理を何かと指定しておくことができるわけですね。やはり環境によってある程度の差が出てしまうので、ウェブサイトを作ったときはできるだけ様々な端末、ブラウザで表示をチェックするのが良いのでしょうね。