WEBデザイン小ネタ集：ちょっとしたカスタマイズで個性的に！スクロールバーを変えてみよう！

2015/12/20

初めまして、東雲です。
初めてじゃない方はこんにちわでしょうか？

とうとう３回目になるWEBデザイン小ネタ集、今回の題材は“スクロールバー”。
画面右端・そして偶に画面下に現れる…棒(バー)です。

そもそも、スクロールバーって弄れるの？

まぁまずそもそもの疑問に
「えっ、スクロールバーのデザインって弄れるの？」
というものがあると思います。
そしてそんな疑問にはこうお答えしましょう。

出来るんです。

一昔前はCSS(スタイルシート)を使用した変更が主流でしたが、
ブラウザによってはCSSのみでの変更ができなくなったので今ではどのブラウザでも対応できるようにjQueryプラグイン等を使用する事が多いようです。
導入方法はネットなどに載っているので調べてみることをお勧めします。

ちなみにCSSで変更する場合はこんな感じにコードを書きます。
[code]
body {

scrollbar-face-color: #000000; /* 表面の色 */
scrollbar-3dlight-color: #000000; /* 左端と上端の色 */
scrollbar-highlight-color: #000000; /* ハイライトの色 */
scrollbar-shadow-color: #000000; /* 影の色 */
scrollbar-darkshadow-color: #000000; /* 右端と下端 */
scrollbar-arrow-color: #000000; /* 矢印の色 */
scrollbar-track-color: #000000; /* バーの背景の色 */

}
[/code]
これだけのコードを書いて、組み込んで、やっとこさスクロールバーが変わるのです。

でも、そこって重要なの？

しかし、今現在デザインにおけるスクロールバーの重要度は低いです。
今のスクロールバーは大抵のデザインの邪魔にならないデザインで、
正直この部分に力を入れる必要性がなくなってきています。

スクロールバーに辛い風が当たってる時代になったんですね…、悲しいです。

それでも、だからこそ

スクロールバーにとって辛い時代になったとしても、
そこにスクロールバーがあってデザインが変えられるならそれを利用しない手はないと思います。

むしろ“サイト全体のデザインの優劣がなかなかつけられない”今だからこそ、
他のサイトとは「おっ、ちょっと違うぞ」というところを見せつけられるポイントになるのではないでしょうか？

昔のスクロールバーのデザインは言うなれば”レトロ”な感じでした。

なのでどのサイトにも合うかと言われると、
首を傾げてしまう程度には古臭いデザインだったんですよね。
サイト作成も今のように情報が拡散されているわけでもなく、誰でも気軽に作れるものではなかった。

そんな中で、スクロールバーを弄れるということが、技術的に一種のステータスのようなモノになっていた時代もあります。

今ある技術は、そういう時代に生まれた「お宝」のようなものなのです。
使わない手は、無いと思いますよ？