今回は、ホームページを作る人なら誰でも1度は考えること、スクロールバーの色変更です。
何気によく見かけますが、「どうやってるんだろう」って思ったことはありませんか
「ブログではムリだろうな」って思った人もおられるかもしれません。
でも、意外と簡単にできちゃうんですよ
それでははじめたいと思います。
ただし今回もお使いのブラウザによっては反映されませんので、動作確認は「～追記～（続きを読む）を参考にしてください。

今回のセレクタ名は「html」なのですが、前回の「body」みたくセレクタ名を探してもたぶん見付からないと思いますから新たに書き加えましょう。
場所はスタイルシート内でしたらドコでも構いませんが・・・そうですね、前回まで「body」のところをイジっていたので、その上にでも書き加えましょう。
書き方は、

となります。
上の色は、このブログのスクロースバーの色になっています。
分かりやすいように、一応「body」の設定も書いておきました。
では解説していきます。
まずは下の画像を御覧下さい。

ある程度場所と名前が分かったところで細かく説明したいと思います。

「scrollbar-3dlight-color」・・・左外側のボーダー
「scrollbar-arrow-color」・・・三角のところ
「scrollbar-highight-color」・・・左内側のボーダー
「scrollbar-shadow-color」・・・右内側のボーダー
「scrollbar-face-color」・・・バー背景
「scrollbar-darkshadow-color」・・・右外側のボーダー
「scrollbar-track-color」・・・トラック背景

それぞれ書く順番は関係ないので、自分が分かりやすい順番に書いてください。
僕が書いたものをコピーして、色だけ変更する方が楽かもしれませんけどね。
色の選択ですが、無難にライト系は明るい色に、シャドウ系は暗い色に設定されるとキレイに見えると思います。
その点はみなさんのセンスですね。

まとめ

今回は新たにセレクタを追加するといったことを踏まえて紹介してみました。
画像を使ってデザインするのも楽しいですけど、色だけを組み合わせるのも楽しいですよね。
みなさんのブログに合ったデザインにして楽しんでみてください。

次回はブログ全体枠の「#container」の設定・・・をする前に、ブログ全体の構成から紹介したいと思います。
それではお疲れ様でした。