ログイン

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

HTML_CSSの問題

HTML_CSS

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

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

問題

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

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

自分の環境に書くコード

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

期待する画面

コードのアイコン

解答ソースコード

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

解説

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

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

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

ベンダープレフィックスはブラウザごとで異なるので覚えておきましょう。
Firefox : -moz-
GoogleChrome、safari : -webkit-
Opera : -o-
InternetExplorer : -ms-
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!