スクロールバーを装飾しよう

初級44でスクロールの設置方法を学びました。今回は、スクロールを装飾する方法について学んでいきます。見本画面のような色付きのスクロールなどを作れるようになるので是非挑戦してみましょう!

あらかじめエディタに書くコード

                    <section>
<p>
    progate、ドットインストールをされている方、それらを終えた方、また模写作業中の方、ポートフォリオを作りたい方達の為の腕試しを用意いたしました。<br>
    上記2つのサービスに掲載されていないコンテンツをふんだんに用意してます。<br>
    これらの用意された問題は、全て私がweb業界で案件実務内実装したものです。 ですので、絶対と言っていいほど今見ている方にとっても通らなければならない道となります。<br>
    ここにあるコンテンツは、全て無料でできます。<br>
    ただし解答ソース、解説を見る際にはパスワードがございますので忍者CODEのツイッターアカウントのフォロー後、DMいただければ当日中にお渡しいたします。(日中は、30分以内でお渡し可)<br>
    初級?上級まで日々、アップデートを重ね用意させていただきます。<br>
    こういう問題が欲しいというご要望がございましたらツイッターまでDMご要望ください。
</p>
</section>
¥HTML¥
                

期待する画面

補足

解説でも説明した、webkitについてもう少し深堀っておきたいと思います。
webkitとはベンダープレフィックス(Vendor Prefix)というもののひとつです。
(ベンダー=提供元、プレフィックス=接頭辞という意味)
ベンダープレフィックスとはブラウザベンダーが草案段階の仕様を先行して実装する場合に、それが拡張機能であることを明示するために付ける識別子のことです。
すなわち、まだ試用段階のような状態で、勧告候補になるまで付けておかなければいけない縛りのようなものです。
しかしどのタイミングで勧告候補になるのか分からないため、使用する際はベンダープレフィックスを付けたものと付けていないものを併記しておくといいでしょう。

ベンダープレフィックスはブラウザごとで異なるので覚えておきましょう。
Firefox : -moz-
GoogleChrome、safari : -webkit-
Opera : -o-
InternetExplorer : -ms-