CSS Web制作 コーディング

CSSでスクロールバーを表示させる方法

ボックスに収まらない要素をスクロールして表示させるにはどうしたらいいんだろう?

長いテキストなど全ては表示させたくない場合があると思います。

そういった時にスクロールバーを表示させると便利です。

今回はこのスクロールバーの表示方法について解説したいと思います。

スクロールバーを表示

まずスクロールバーを表示させる条件として、ボックスの高さを指定する必要があります。

当然高さを指定しなければ全部表示されるので、スクロールバーも不要という事です。

なので今回のボックス高さは300pxとしました。

 

そしてスクロールバーを表示させるにはoverflowというプロパティを使います。

overflowにはいくつか値があるので、違いを説明していきます。

 

visible

overflow: visible; は高さを指定してもスクロールバーが表示されず、そのままはみ出ます。

これは初期値なので、overflowを書かなくてもこうなります。

枠線がない部分がはみ出た箇所です。

高さを指定しなかった時は全部表示されるので、中途半端にはみ出るこのvisibleは基本的に使わないと思います。

 

hidden

overflow: hidden; は指定した高さに収まりますがスクロールバーは表示されず、指定した高さより下は見れなくなってしまいます。

これもほとんど使う機会はないかと思います。

 

scroll

overflow: scroll; にするとスクロールバーを表示させることが出来ます。

ただしWindowsとMacでは見え方が違います。

 

Windowsの場合

 

Macの場合

 

Windowsの方はスクロールバーが常時表示されますが、Macの場合はスクロールしないと表示されません。

Macでスクロールした場合はこのようにスクロールバーが表示されますが、デザインがWindowsとは異なります。

 

そして先ほどのWindowsの例で見ると、スクロールの必要がない横のスクロールバーも表示されています。

このスクロールバーは縦と横、それぞれ別々に設定することも出来ます。

  • overflow-x → 横方向
  • overflow-y → 縦方向
  • overflow → 縦横両方

つまり先ほどは overflow: scroll; にしたので、縦横両方表示されてしまったという事です(Macはスクロールしないと表示されないので、スクロール出来ない横方法は表示されません)

なので縦方向だけスクロールバーを表示させたい時は、overflow: scroll; ではなく overflow-y: scroll; とすればOKです。

overflow: scroll; にして overflow-x: hidden; でも同じです(少しややこしいですが、縦横両方表示させてから横方向を非表示にするので、hidden以外にもvisibleでもOKです)

なので縦方向のみスクロールバーを表示させた場合のWindowsは次のようになります。

Windowsの場合(overflow-y: scroll;)

 

auto

最後に overflow: auto; ですが、これはブラウザに依存して自動で決まるもので、基本的には overflow: scroll; と同じになります。

ただしWindowsの場合は今回の例で言えば縦方向だけ表示されるので、正確に言えば overflow-y: scroll; と同じになります。

 

横のスクロールバーを使うには?

Windowsでは overflow: scroll;overflow-x: scroll; にすれば横のスクロールバーは表示されますが、デフォルトでは横幅いっぱいになると自動で改行される為スクロールは出来ません。

自動で改行させずに横スクロールさせたい時は white-space: nowrap; と書けばOKです(初期値はwhite-space: normal; となり、自動改行されます

先ほどの写真と見比べてみると分かりますが、横のスクロールバーがアクティブになりました。

今回は以上です。

-CSS, Web制作, コーディング