問題

52
HTML/CSS

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

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

HTML/CSSの問題に挑戦しよう!

問題

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

スクロールバーを装飾していきます。

動画を参考に実装してみましょう!

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

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

期待する画面

解答と解説(スクロールバーを装飾しよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

スクロールバーのスタイルを変更する簡単な3つのプロパティをご紹介します。

::-webkit-scrollbarでスクロールバーの幅を決めれます。
::-webkit-scrollbar-trackでスクロールバー全体の色や
borderの大きさなどが指定できます。

最後に::-webkit-scrollbar-thumbで今いるバーの色や
枠の大きさなどが指定できます。

補足

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

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

さらにスキルアップしたい方は公式LINEから「HTML/CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは? 適正コース診断