問題52:スクロールバーを装飾しよう
スクロールバーを装飾していきます。
動画を参考に実装してみましょう!
動画を参考に実装してみましょう!
あらかじめエディタに書くコード
<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¥
補足
解説でも説明した、webkitについてもう少し深堀っておきたいと思います。
webkitとはベンダープレフィックス(Vendor Prefix)というもののひとつです。
(ベンダー=提供元、プレフィックス=接頭辞という意味)
ベンダープレフィックスとはブラウザベンダーが草案段階の仕様を先行して実装する場合に、それが拡張機能であることを明示するために付ける識別子のことです。
すなわち、まだ試用段階のような状態で、勧告候補になるまで付けておかなければいけない縛りのようなものです。
しかしどのタイミングで勧告候補になるのか分からないため、使用する際はベンダープレフィックスを付けたものと付けていないものを併記しておくといいでしょう。
ベンダープレフィックスはブラウザごとで異なるので覚えておきましょう。
Firefox : -moz-
GoogleChrome、safari : -webkit-
Opera : -o-
InternetExplorer : -ms-
webkitとはベンダープレフィックス(Vendor Prefix)というもののひとつです。
(ベンダー=提供元、プレフィックス=接頭辞という意味)
ベンダープレフィックスとはブラウザベンダーが草案段階の仕様を先行して実装する場合に、それが拡張機能であることを明示するために付ける識別子のことです。
すなわち、まだ試用段階のような状態で、勧告候補になるまで付けておかなければいけない縛りのようなものです。
しかしどのタイミングで勧告候補になるのか分からないため、使用する際はベンダープレフィックスを付けたものと付けていないものを併記しておくといいでしょう。
ベンダープレフィックスはブラウザごとで異なるので覚えておきましょう。
Firefox : -moz-
GoogleChrome、safari : -webkit-
Opera : -o-
InternetExplorer : -ms-
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
::-webkit-scrollbarでスクロールバーの幅を決めれます。
::-webkit-scrollbar-trackでスクロールバー全体の色や
borderの大きさなどが指定できます。
最後に::-webkit-scrollbar-thumbで今いるバーの色や
枠の大きさなどが指定できます。