CSSのスクロールバーを表示、非表示にする方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSのスクロールバーを表示、非表示にする方法について解説しています。overflowプロパティを使うことでスクロールバーの表示・非表示を指定することができます。書き方と画面上での見え方をサンプルで確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

CSSのスクロールバーを表示、非表示にする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

スクロールバーを表示、非表示にする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

overflowプロパティとは

overflowプロパティは、ボックスの中に収まらない要素をどのように表示するかを設定します。

overflowプロパティの値一覧

  • visible / ボックスからはみ出ている要素を表示する(初期値)
  • hidden  / ボックスからはみ出ている要素は表示しない
  • scroll / ボックスに収まらない内容はスクロールして表示できるようにする

 

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

スクロールバーを表示するには、overflow: scroll; を適用します。

  • X軸方向のスクロールバーを表示したい場合は overflow-x: scroll;
  • Y軸方向のスクロールバーだけを表示する場合は overflow-y: scroll;

とします。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

スクロールバーを非表示にする方法

スクロールバーを非表示にするには、はみ出ている要素を表示しない overflow: hidden; を適用します。

 

実際に書いてみよう

X軸方向、Y軸方向ともにスクロールバーを表示する場合、X軸方向のスクロールバーを表示する場合、Y軸方向のスクロールバーを表示する場合の3つのボックスを作ってみます。

HTML:

<div class="box scroll">
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
  <p>overflowプロパティでスクロールバーを表示してみる</p>
</div>
<div class="box scrollx">
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>
</div>
<div class="box scrolly">
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
  <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>
</div>

CSS:

.box{
  width:150px;
  height:100px;
  padding:30px;
  margin:10px;
  background:#ddd;
}
.scroll{
  overflow:scroll;
}
.scrollx{
  overflow:hidden;
  overflow-x:scroll;
}
.scrolly{
  overflow:hidden;
  overflow-y:scroll;
}
p{
 white-space:nowrap; 
}

See the Pen
yLyvNXL
by marihashimoto (@mari877)
on CodePen.

 

監修してくれたメンター

橋本真理

web/グラフィックデザイナー。

webサイトのデザインからコーディング等一式、ロゴや各種広告などのデザインやイラストを描いたりしています。

TechAcademyではWebデザインコース・WordPressコースを担当。

趣味は、ラジオと音楽と踊ること。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。