CSS - スクロールバー：ビギナー向けガイド

こんにちは、未来のウェブデザインの魔法使いたち！今日は、CSSのスクロールバーの魔法の世界に飛び込みます。コードを書いたことがない人も心配しないでください - この旅の親切なガイドとしてあなたを案内し、最後にはプロのようにスクロールバーをスタイルを付けることができるようになります！

CSS - Scrollbars

スクロールバーの紹介

具体的な内容に入る前に、スクロールバーとは何かについて話しましょう。あなたは毎日ウェブを閲覧する際に見ている - ページの側面や底部にあって、スクリーンに一度に表示できないコンテンツを上下左右にスクロールできる小さなバーです。

さて、あなたが魔法の杖を振ってこれらのスクロールバーの外見を変えることができたらどうでしょうか。まさに、今日CSSで学ぶ的就是それです！

スクロールバーのスタイル付け方法

CSSでスクロールバーをスタイル付けることは、あなたのウェブページにメイクオーバーを施すことと同じです。ユニークなユーザーエクスペリエンスを提供し、サイトを際立たせる方法です。簡単な例から始めましょう：

/* これはあなたのウェブページの全体に適用されます */
body::-webkit-scrollbar {
width: 12px;               /* スクロールバー全体の幅 */
}

body::-webkit-scrollbar-track {
background: orange;        /* トラッキングエリアの色 */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* スクロールサムの色 */
border-radius: 20px;       /* スクロールサムの丸み */
border: 3px solid orange;  /* スクロールサムの周囲にパディングを作成 */
}

この例では、ブラウザに以下を指示しています：

スクロールバーを12ピクセル幅にする
トラック（サムがスライドするエリア）をオレンジ色にする
サム（スクロールする部分）を青色にする
サムに丸い角を付ける
サムの周囲にオレンジ色の境界線を追加する

すごくないですか？でも、まだ続きます！

スクロールバーのセレクタ

スクロールバーをスタイル付けするために、特別なセレクタを使用します。これらは、スクロールバーのどの部分を変更するかをCSSに伝える魔法の言葉と思ってください。以下が主なものです：

セレクタ	説明
::-webkit-scrollbar	スクロールバー全体をスタイル付け
::-webkit-scrollbar-button	スクロールバーのボタン（上下に指を向ける矢印）をスタイル付け
::-webkit-scrollbar-track	トラック（進行バー）をスタイル付け
::-webkit-scrollbar-track-piece	トラック（進行バー）のハンドルで覆われていない部分をスタイル付け
::-webkit-scrollbar-thumb	ドラッグ可能なスクロールハンドルをスタイル付け
::-webkit-scrollbar-corner	水平方向と垂直方向のスクロールバーが交わる角をスタイル付け
::-webkit-resizer	一部の要素の底部角に現れるドラッグ可能なリサイズハンドルをスタイル付け

カスタムスクロールバーの作成

今までの魔法の言葉（セレクタ）を知識に基づいて、楽しいカスタムスクロールバーを作成しましょう：

/* ネオンテーマのスクロールバーを作成しましょう！ */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

この例では、サイバーパンク映画に属するスクロールバーを作成しています！トラックは黒色で、微妙な内影があり、サムにはグラデーションが付いています。ホバーするとグラデーションが変わります。このクラスをオーバーフローがある任意の要素に適用すると、魔法が起きます！

CSS スクロールバーのスタイル付け

スクロールバーのスタイル付けをステップに分けて説明しましょう：

ターゲットを選ぶ：全体のページ（bodyを使用）または特定の要素（クラスやIDを使用）にスタイルを付けたいかを決定します。
幅を設定する：::-webkit-scrollbar セレクタを使用して、スクロールバーの全体幅を設定します。
トラックをスタイル付けする：::-webkit-scrollbar-track を使用して、トラックの背景、影、他のスタイルを設定します。
サムをデザインする：::-webkit-scrollbar-thumb を使用して、スクロール可能な部分のスタイルを設定します。ここで色、グラデーション、形を自由に创意します。
インタラクティブにする：:hover や :active などの擬似クラスを使用して、ユーザーがスクロールバーとインタラクションする際の外観を変更します。

以下にすべてをまとめた例を示します：

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

これにより、cool-scroll クラスを持つ任意の要素にスリムでモダンのスクロールバーが作成されます。スクロールバーは標準より少し幅が広く、角が丸く、ホバーすると暗くなります。

CSS スクロールバー関連プロパティ

今までWebKitブラウザ（ChromeやSafariなど）に焦点を当ててきましたが、異なるブラウザで動作する標準的なCSSプロパティもあります。以下の表を参照してください：

プロパティ	説明
scrollbar-width	スクロールバーの幅を設定（Firefox専用）
scrollbar-color	スクロールバーの色を設定（Firefox専用）
overflow	コンテンツが要素のボックスを超えた場合の動作を指定
overflow-x	コンテンツが要素のコンテンツエリアの左右端を超えた場合の動作を指定
overflow-y	コンテンツが要素のコンテンツエリアの上下端を超えた場合の動作を指定

以下のように使用します：

/* Firefox用 */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* 他のブラウザ用 */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

このコードは、異なるブラウザ間で一貫したスクロールバーのスタイルを設定します。細い幅で、軽いトラックと暗いサムです。

そして、ここまでで皆さんのCSSスキルが一層上達しました。スクロールバーのスタイル付けを学びました。力を持ちつつ、ユーザーエクスペリエンスを向上させるためにこれらの技術を賢く使ってください。ユーザーを混乱させたり、使いにくいインターフェースを作成したりしないように注意してください。

実験を続け、学び続け、そして最も重要なのは、楽しむことです！もしかしたら、次のウェブデザインのトレンドはあなた独自のスタイルのスクロールバーかもしれません。ハッピーコーディング！

Credits: Image by storyset