サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

スクロールバーの表示・非表示（CSS:overflow）

スクロールバーの表示・非表示（CSS:overflow）

この記事にはプロモーションが含まれています。

特にスマホからWebサイトを見る場合に言えることなのですが、要素の一部分が少しだけ画面（親要素）からはみ出して横スクロールできる状態になっていると、縦スクロールさせた時に、同時に横にも画面がガクガク動いて落ち着かない…ということになってしまいます。

試しに、▼のボックスをスクロールさせてみてください。横にもスクロールできるようになっているので、なんだか不安定なイメージになります。

こんにちは
このボックスは縦にも横にもスクロールできます。
スクロールをさせてみてください。
不必要にスクロールできてしまい、違和感が出ているのがわかると思います。

コンテンツ（ここでは文章）はボックス内におさまっているので、横にスクロールできてしまうことがより一層違和感を生み出してしまっています。

では次に、横スクロールできなくしたものを見てみましょう。

こんにちは
このボックスは横にはスクロールできません。
縦スクロールをさせてみてください。
不必要な横スクロールがなくなり、自然な感じになりました。

横スクロールできない方が自然で、違和感がないのがよくわかりますね。

このように、スクロールの必要がないところではスクロールバーを非表示にしてスクロールできないようにする…というテクニックが有効です。

そもそも要素が画面や親要素からはみ出ないように調整するのが基本ではありますが、ちょっとした余白・スペースではみ出る場合は要素を小さくするよりも、スクロールバーを非表示にした方が確実で調整が楽な場合も多いです。

というわけで、今回はoverflowプロパティで、スクロールバーを表示・非表示にする方法を紹介します。

– 目次 –

▼動画解説は下のサムネイルから（YouTubeに飛びます）

CSS：overflowプロパティの解説動画リンク

スクロールバーの種類と値

一言で「スクロールバー」と言っても、横方向と縦方向の２種類のスクロールバーがあります。

そして、横方向のスクロールバーはoverflow-xプロパティで設定でき、縦方向のスクロールバーはoverflow-yプロパティで設定できます。

また、横・縦を同時に設定する場合は、overflowプロパティを使用します。

一言メモ：＃ CSSにおけるx（エックス）とy（ワイ）

取ることができる値は、overflow関係のプロパティは全て同じなので、まとめて紹介します。

値説明
visible既定値。コンテンツは親要素などに合わせてクリップされずに、そのままはみ出る
hiddenスクロールバーが現れるような条件では、スクロールバーを隠す（クリップされる）。あくまで隠しているだけなので、JavaScriptなどのプログラムでスクロールさせることが可能
clipスクロールバーが現れるような条件では、スクロールできなくする（クリップされる）。hiddenと違い、完全にスクロールできなくなる
scrollコンテンツが親要素などからはみ出る場合は、スクロールバーが現れる（クリップされる）
autoコンテンツをクリップせずに表示しきれる場合はそのまま。はみ出る場合はクリップされてスクロールバーが現れる

絶対にスクロールバーを表示させたくない場合、プログラムを使ってもスクロールできないclipの方が良いように思えますが、2021年7月現在、clipは未対応のブラウザ（Safariなど）も多いので、基本的にはhiddenの方が良いでしょう。

▲2022年9月追記：Safariは対応しました。

また、overflowプロパティでoverflow-xとoverflow-yを同時に指定する時は、以下のように指定します。

＊overflowの構文例＊
{ overflow: hidden scroll; }

上記の例だと、横スクロール（overflow-x）は隠して、縦スクロール（overflow-y）はスクロールバーを表示ということになりますね。

それではoverflowプロパティの基本を理解できたところで、表示結果とサンプルコードを見てみましょう。

縦スクロールのみ表示（overflow: hidden scroll;）

HTML※見切れている場合はスクロールできます

<div class="parent_box">
	<div class="child_box">
		<p>縦スクロールのみ表示（overflow: hidden scroll;）</p>
	</div>
</div>

CSS

.parent_box {
	background-color: aliceblue;
	width: 80%;
	height: 100px;
	margin: 2rem auto;
	overflow: hidden scroll;
	border: solid;
}
.child_box {
	width: 120%;
}
.child_box p {
	width: 70%;
	padding: 10px;
	height: 200px;
}

▲親要素の横幅（width）が80％なのに対し、子要素の横幅は120％になっている点。そして、親要素の高さ（height）は100pxなのに対し、子要素の高さは200pxになっている点に注目して下さい。

何も設定しなければ、横にも縦にもはみ出るはずだったということになります。

横方向にはみ出ていないのは、overflow-xに該当する値が「hidden」だからです。（クリップされてスクロールバーが非表示になる）
そして、縦方向にはみ出ていないのは、overflow-yに該当する値が「scroll」」だからです。（クリップされてスクロールバーが表示）

また、overflowプロパティははみ出る要素そのものではなく、はみ出る要素を含む親要素に設定します。

幅をオーバーする要素そのものに設定してもうまくいかないので、注意が必要なポイントです。

    POINT!
  1. ・スクロールバーには横と縦の２種類がある！
  2. ・横スクロールバーの設定は「overflow-x」、縦スクロールバーの設定は「overflow-y」、一括設定が「overflow」！
  3. ・はみ出る要素を含む親要素に指定する！

スクロールバー表示の活用

基本的に意図しないスクロールバーは非表示にさせたい場合が多いですが、意図的にスクロールバーを表示させるのが効果的なシーンもあります。

たとえばですが、以下のサンプルをクリックしてみてください。

補足説明を開く

ここに補足説明テキストが入ります。
ここに補足説明テキストが入ります。
ここに補足説明テキストが入ります。
ここに補足説明テキストが入ります。
ここに補足説明テキストが入ります。

▲このように、補足説明や注釈など全員に読んでもらう必要がないコンテンツに関しては、あまり大きなスペースを取らずにコンパクトにまとめた方がスッキリする場合があります。

この時、縦スクロールバーを表示させずに補足説明テキストが全て表示されるようにしても良いのですが、重要度が低いテキストであればあるほど、そこにスペースを割くのはもったいないと言えます。

また、このサイトもそうですがプログラムやコンピュータ言語のコードを掲載する必要がある場合、コードの行数が多くなればなるほど、掲載するだけで膨大なスペースを必要としてしまいます。

しかし、中には記事だけ読めればそれでよくて、コードはじっくりと目を通さないという方も多いと予想されますよね。
それなのにコードを全て表示させてしまうと、記事が読みづらくなってしまいます。

そのような場合も、あえてボックス内にスクロールバーを表示させて、スペースを省くというテクニックが有効です。

    POINT!
  1. ・基本的にスクロールバーは隠したいことが多いが、意図的に表示させることが有効なケースもある！
  2. ・補足的な説明など全員に読んでもらう必要がないコンテンツは、スクロールバーの表示を活用してスペースを省くとスッキリする！
  3. ・スクロールバーの表示をうまく活用するのが、Web制作の幅を広げるコツ！

スクロールバー表示の注意点

前章ではスクロールバーを表示させることの有用性を説明しましたが、スクロールバーの表示はウェブブラウザによって大きく異なる部分があるため注意が必要です。

特に注意が必要なのがMacOS/iOSでのスクロールバーの取り扱いです。

日本ではiPhoneのシェア率が高いため、iOSでのWebサイト表示の挙動は常にチェックしておく必要があります。
具体的にiOSとWindowsでスクロールバーがどう違うのか、画像で見てみましょう。

まずは、WindowsのChromeで、overflow: scroll;にした時の表示です。

Windowsでのスクロールバーの表示

横と縦のスクロールバーがはっきり見えているのがわかりますね。

ちなみにですが、Windowsだとoverflowプロパティの値をscrollにした場合、実際にスクロールできるスペースがあるかどうかにかかわらずスクロールバーが表示されます。

それでは次に、iOSのSafariで同じものをスクリーンショットした画像を見てみましょう。

MacOSでのスクロールバーの見え方

と、このようにスクロールできるのにバーが表示されていません。
スクロールさせることではじめてスクロールバーが現れるという仕様になっています。

そのため、パッと見ではスクロールできるかどうかがわからない…ということになります。

以前はiOSのスクロールバーをCSS調整で常時表示させることができたのですが、2021年7月現在、CSSだけではiOSのスクロールバーを常時表示はできません。（もしかしたら何らかの方法はあるのかもしれませんが、少なくとも手軽にはできません）

デザイン的には必要な時以外、スクロールバーが隠されるのでスッキリ見えて良いのですが、デメリットとしてはユーザーがスクロールできることに気づかない可能性があると言えます。

このiOSの仕様の対応策としては、以下のようなものがあります。

１スクロールできることを明記する

２スクロールできることがわかるアイコン・画像などを貼り付ける

それでは、それぞれの対処法を順番にみていきましょう。

①「スクロールができることを明記する」というのは、そのままの意味で、スクロールできるボックスの近くにスクロールできる旨を記載しておくということです。具体的には以下のようなイメージです。

＊スクロールできます＊

スクロールできるボックス

この方法は、スクロールできることが明確に伝えられるので、最も確実で分かりやすいと言えます。

しかし、”注意書きのテキストをどこに配置するか”という問題がつきまといますし、場合によってはデザイン性を損ねてしまう可能性もあります。
そのため、注意書きを加える場合は注意書きが読める程度にフォントサイズを小さめに設定すると良いでしょう。

続いて②「スクロールできることがわかるアイコン・画像などを貼り付ける」ですが、具体的なイメージは以下のサンプルをご覧下さい。

スクロールバー

スクロールできるボックス

アイコンを貼り付ける方法は、注意書きを配置するよりもさりげない感じにすることができます。

一方で、スマホではアイコン画像が小さく表示されることもあり、テキストよりもわかりづらいというデメリットがあります。

ちなみにですが、③「プログラム（JavaScript）でスクロールバーを実装する」…という方法もあるにはあります。

しかし、Mac/iOSのスクロールバー常時表示のためだけにプログラムを読み込ませる＝手間を掛けてページを重くする…よりは、サラッと注意書きなどで対応した方が良い気はします。

    POINT!
  1. ・OSによっては、スクロールさせるまでスクロールバーが表示されない！
  2. ・そのため、スクロールできることが分かるようにしておくと良い！
  3. ・注意書きや、アイコンでスクロールできることを示す方法がある！

スクロールボックスの装飾

overflowプロパティの値をscrollにするとスクロールバーが表示されますが、ここではスクロールバーが表示されている要素をスクロールボックスと呼ぶことにします。

そしてスクロールボックスを装飾したい場合…特に、ボックスの枠線上に画像やテキストを配置する場合、注意が必要なので解説しておきます。

まずは▼のサンプルをご覧下さい。

タイトル

ここに文章を記載

上のサンプルは、親要素にposition: relative; 子要素にposition: absolute; でボックスとタイトルの位置を普通に調整したものです。（コードは以下をご覧下さい）

HTML※見切れている場合はスクロールできます

<div class="box">
	<p class="title">タイトル</p>
	<p>ここに文章を記載</p>
</div>

CSS

.box {
	position: relative;
	width: 80%;
	margin: 2rem auto;
	border: solid;
	padding: 20px;
}
.title {
	position: absolute;
	top: -2rem;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	background-color: white;
	padding: 10px;
	border: solid green;
	border-radius: 5px;
}

なんてことはありません。positionプロパティのオーソドックスな使い方です。
しかし、同じことをスクロールボックスでしてしまうと…？

タイトル

ここに文章を記載

当然と言えば当然なのですが、positionプロパティで移動させた要素がクリップされてしまいます。

最初のサンプルのように、スクロールボックスの枠線上にテキストや画像を配置したい場合、親子関係による、position: relative/absolute は使用できません。

以下のように親子関係にせずに、重ねたい要素をpositionプロパティなどで調整する必要があります。

タイトル

ここに文章を記載

HTML

<p class="title">タイトル</p>
<div class="box">
	<p>ここに文章を記載</p>
</div>

CSS

.box {
	width: 80%;
	margin: 0 auto;
	border: solid;
	padding: 20px;
	overflow: scroll;
}
.title {
	position: relative;
	top: 1rem;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	background-color: white;
	padding: 10px;
	border: solid green;
	border-radius: 5px;
}

今回解説を加えたのは、スクロールボックスにpositionプロパティで要素を重ねる場合…という、やや特殊なケースではありますが、スクロールボックスにスクロールできることを明記したりアイコンを貼り付けたい場合は使えるテクニックなので覚えておくと便利です。

    POINT!
  1. ・スクロールボックスに要素を重ね合わせたい場合、注意が必要！
  2. ・親子関係にせずに、重ねたい要素に対してposition: relative;で調整すると良い！
– 関連記事 –

ワンポイントチェック

overflowプロパティの値をhiddenにすることで、スクロールバーを隠すことができますが、あくまで隠しているだけなのでプログラムを使えばスクロールさせることもできます。

実際に体験してみましょう。スクロールバーを非表示にしたスクロールボックスと、強制的にスクロールできるプログラムを作動させるボタンを用意しました。

普通の手段ではスクロールできないことを確認した上で、ボタンをクリックしてみてください。

スクロールバーは非表示・プログラムでスクロール可能

▼サンプルのコードはこちらです。JavaScriptでスクロールさせるプログラムを組んでいます。

HTML※見切れている場合はスクロールできます

<div class="sample_scroll_parent_box">
	<div class="sample_scroll_child_box">
		<p>スクロールバーは非表示・プログラムでスクロール可能</p>
	</div>
</div>
<div style="text-align: center;">
	<button class="forced_scroll" type="button" name="button">強制スクロール</button>
	<button class="initial_scroll" type="button" name="button">初期位置に戻す</button>
</div>

CSS

.sample_scroll_parent_box {
	background-color: aliceblue;
	width: 200px;
	height: 100px;
	margin: 2rem auto;
	overflow: hidden;
	border: solid;
}
.sample_scroll_child_box {
	width: 300px;
}
.sample_scroll_child_box p {
	width: 70%;
	padding: 10px;
	height: 200px;
}

JavaScript

const sample_scroll_parent_box = document.querySelector('.sample_scroll_parent_box');
const forced_scroll = document.querySelector('.forced_scroll');
const initial_scroll = document.querySelector('.initial_scroll');

let scrollMove = 0;

forced_scroll.addEventListener('click', ()=> {
	const forcedScroll = setInterval( ()=> {
	scrollMove++;
		sample_scroll_parent_box.scrollTo(scrollMove,scrollMove);
		if (scrollMove > 50) {
			clearInterval(forcedScroll);
			scrollMove = 0;
		}
	},50);
});

initial_scroll.addEventListener('click', ()=> {
  sample_scroll_parent_box.scrollTo(0,0);
});

この“overflow: hidden;ではユーザーはスクロールできないが、制作側（プログラム）で制御可能”という仕様は、たとえばユーザーが任意にスクロールできない画像のスライドを作りたい場合などに活用できます。

なお、CSSだけではスクロールを制御することはできないので、overflowプロパティを使ったスクロール調整には、JavaScriptの使用が必須と言えます。

今回の動画で紹介したコード！

今回の解説動画で使用したコードをです。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .scroll_box {
      background-color: aliceblue;
      padding: 20px;
      width: 60%;
      height: 200px;
      margin: 200px auto;
      border: solid;
    }
    .text {
      width: 120%;
      height: 120%;
      background-color: pink;
    }

    .scroll_box1 {
      overflow: visible;
    }

    .scroll_box2 {
      overflow: hidden;
    }

    .scroll_box3 {
      overflow: scroll;
    }


      .sample_scroll_parent_box {
        background-color: aliceblue;
        width: 200px;
        height: 100px;
        margin: 2rem auto;
        overflow: hidden;
        border: solid;
      }
      .sample_scroll_child_box {
        width: 300px;
      }
      .sample_scroll_child_box p {
        width: 70%;
        padding: 10px;
        height: 200px;
      }
    </style>
  </head>
  <body>

    <div class="scroll_box scroll_box1">
      <div class="text">overflow: visible（規定値）</div>
    </div>

    <div class="scroll_box scroll_box2">
      <div class="text">overflow: hidden（クリップされれて、スクロールバーは隠れる）</div>
    </div>

    <div class="scroll_box scroll_box3">
      <div class="text">overflow: scroll（クリップされて、スクロールバーが現れる）</div>
    </div>



    <div class="sample_scroll_parent_box">
      <div class="sample_scroll_child_box">
        <p>スクロールバーは非表示</p>
      </div>
    </div>
    <div style="text-align: center;">
      <button class="forced_scroll" type="button" name="button">強制スクロール</button>
      <button class="initial_scroll" type="button" name="button">初期位置に戻す</button>
    </div>

    <div style="height: 300px;"></div>

    <script type="text/javascript" defer>
      {
        const sample_scroll_parent_box = document.querySelector('.sample_scroll_parent_box');
        const forced_scroll = document.querySelector('.forced_scroll');
        const initial_scroll = document.querySelector('.initial_scroll');


        let scrollMove = 0;

        forced_scroll.addEventListener('click', ()=> {
          const forcedScroll = setInterval( ()=> {
            scrollMove++;
            sample_scroll_parent_box.scrollTo(scrollMove,scrollMove);
            console.log(scrollMove);
            if (scrollMove > 50) {
              clearInterval(forcedScroll);
              scrollMove = 0;
            }
          },50);
        });

        initial_scroll.addEventListener('click', ()=> {
          sample_scroll_parent_box.scrollTo(0,0);
        });

      }
    </script>
  </body>
</html>
記事のトップへ戻る

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ（iOS・Android)ディベロッパー＆デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第３火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語：JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格：応用情報技術者/基本情報技術者/ウェブデザイン技能検定３級

Twitterアイコン Instagramアイコン