バナー画像

Webサイトを作成していると、指定した表示領域内でスクロールさせるような画面の動きを作りたいことも出てくるかと思います。

本記事では、HTMLとCSSで簡単に実装出来るスクロールバーの基本的な使い方についてご紹介していきたいと思います。

HTMLでスクロールバーの表示・非表示のやり方は?


HTMLでスクロールバーの表示・非表示を簡単に実装する方法として、CSSに「overflow」プロパティを使用する方法が挙げられます。

「overflow」プロパティでは、指定した要素の領域内に収まらない内容を、どうやって処理するのかを指定することが出来るプロパティです。

overflowプロパティの基本的な使い方

overflowプロパティには、横方向のスクロール表示を指定する「overflow-x」と縦方向のスクロール表示を指定する「overflow-y」の2種類が存在します。

どちらかを明示せず「overflow」と記述した場合には、縦横双方に指定した値が適用されます。

CSSでの記述方法が下記のようになります。

セレクタ {
  overflow-x: 値;
  overflow-y: 値;
}

セレクタ {
  overflow: 値;
}

overflowプロパティで指定出来る値

overflowプロパティに指定出来る値として、頻繁に利用される下記の4つを覚えておきましょう。

  • visible: 表示内容が領域内に収まらない場合、領域をはみ出して表示される
  • hidden: 表示内容が領域内に収まらない場合でも、スクロールバーが表示されない
  • scroll: 表示内容が領域内に収まらない場合、スクロールバーが表示される
  • auto: 使用するブラウザの設定によりスクロール表示が切り替えられる

HTMLで各要素にスクロールバーを設定するサンプルコード


では実際に、HTMLで各要素にスクロールバーを設定するサンプルコードで動きを確認していきたいと思います。

HTMLの要素にvisibleを設定

サンプルでは、ブロックレベル要素である「div」タグに対して、「visible」を設定したサンプルです。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>Overflow Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="overflow-div">
  テストテストテストテストテストテストテストテストテストテストテストテストテスト<br>
  テストテストテストテストテストテストテストテストテストテストテストテストテスト<br>
  テストテストテストテストテストテストテストテストテストテストテストテストテスト<br>
  テストテストテストテストテストテストテストテストテストテストテストテストテスト<br>
  テストテストテストテストテストテストテストテストテストテストテストテストテスト
</div>
</body>
</html>
ポテパンダの一言メモ

※以降のサンプルに関してもHTMLは同じものを使用します。

style.css

.overflow-div {
  width: 300px;
  height: 300px;
  border: solid 1px;
  overflow: visible;
}

サンプルを実行した結果が下記のキャプチャとなります。

divタグで指定した領域幅を超えている部分は、縦方向は領域をはみ出して、横方向は領域幅で折り返されていることをご確認頂けます。

HTMLの要素にhiddenを設定

次にoverflowプロパティにhiddenを設定した場合の動きを確認してみましょう。

style.css

.overflow-div {
  width: 300px;
  height: 300px;
  border: solid 1px;
  overflow: hidden;
}

サンプルを実行した結果が下記のキャプチャとなります。

縦方向は領域を超えた部分に関しては非表示となり、横方向についてはvisibleを設定した場合と同じく領域幅で折り返されていることがご確認頂けます。

HTMLの要素にscrollを設定

HTMLの要素にscrollを設定した場合の挙動をサンプルで見ていきましょう。

style.css

.overflow-div {
  width: 300px;
  height: 300px;
  border: solid 1px;
  overflow: scroll;
}

overflowプロパティの値を「scroll」と設定することでスクロールバーが表示されることをご確認頂けます。

上記サンプルでは、縦方向のスクロールのみで横方向は折り返された状態で表示されています。

横方向も折り返さずに、スクロールバーを表示したい場合には下記のように記述します。

.overflow-div {
  width: 300px;
  height: 100px;
  border: solid 1px;
  overflow: scroll;
  white-space: nowrap;
}

「white-space: nowrap」を指定することで、自動での折り返しをしない設定となります。

「overflow: scroll」が設定されていることにより、横方向のスクロールバーが表示されるようになります。

HTMLの要素にautoを設定

HTMLの要素にautoを設定した場合の挙動を確認してみます。

autoの挙動は各ブラウザにより異なりますが、基本的にはスクロールバーが表示される設定となっています。

style.css

.overflow-div {
  width: 300px;
  height: 300px;
  border: solid 1px;
  overflow: auto;
}

サンプルを実行した結果が下記のキャプチャとなります。

スクロールバーが表示されていることをご確認頂けます。

ポテパンダの一言メモ

サンプルではGoogleChromeで動作検証を行っています。

横方向だけのスクロールを許可する方法を確認しよう

ここまでで、基本的なoverflowプロパティの値について動きを確認してきました。

最後に、横方向だけにスクロールバーを表示させるサンプルについてもご紹介しておきます。

縦方向だけにスクロールさせたい場合は、「overflow-x」「overflow-y」に設定する値を入れ替えるだけです。

style.css

.overflow-div {
  width: 300px;
  height: 100px;
  border: solid 1px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

横方向にスクロールさせたい場合「overflow-x」に「scroll」の値を設定し、縦方向のスクロールはさせたくないため「overflow-y」に「hidden」の値を設定します。

サンプルを実行した結果が下記のキャプチャです。

さいごに:HTMLでスクロールバーを表示する方法を覚えてWebサイトの操作性を向上しよう


本記事では、HTMLでスクロールバーの表示・非表示を設定する「overflow」プロパティについてご紹介してきました。

Webアプリを作成していると、意外にスクロールバーを使用する場面は多くあります。

ぜひ「overflow」プロパティの使い方を覚えて、HTMLでスクロールバーを利用した使いやすいサイト作成に挑戦してみてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。