【CSS Modules】rangeアットルール記述子の使い方

Copy
1.rangeInput {
2  /* デフォルトの外観をリセットし、基本的なスタイルを設定 */
3  -webkit-appearance: none;
4  width: 100%;
5  height: 8px; /* スライダー全体の高さ */
6  background: #d3d3d3; /* トラックの背景色 */
7  outline: none; /* フォーカス時のアウトラインを非表示 */
8  opacity: 0.7; /* 通常時の不透明度 */
9  transition: opacity 0.2s; /* ホバー時のトランジション */
10  border-radius: 5px; /* トラックの角を丸くする */
11}
12
13.rangeInput:hover {
14  opacity: 1; /* ホバー時に完全に不透明にする */
15}
16
17/* Webkit (Chrome, Safari) 系ブラウザ用のスライダーのトラック */
18.rangeInput::-webkit-slider-runnable-track {
19  width: 100%;
20  height: 8px;
21  cursor: pointer;
22  background: #4caf50; /* トラックの色 */
23  border-radius: 5px;
24}
25
26/* Webkit (Chrome, Safari) 系ブラウザ用のスライダーのつまみ（サム） */
27.rangeInput::-webkit-slider-thumb {
28  -webkit-appearance: none; /* デフォルトスタイルをリセット */
29  height: 20px; /* つまみの高さ */
30  width: 20px; /* つまみの幅 */
31  border-radius: 50%; /* 円形にする */
32  background: #04aa6d; /* つまみの色 */
33  cursor: pointer;
34  margin-top: -6px; /* トラックの中央に配置 */
35  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* つまみに影を追加 */
36}
37
38/* Firefox 用のスライダーのトラック */
39.rangeInput::-moz-range-track {
40  width: 100%;
41  height: 8px;
42  cursor: pointer;
43  background: #4caf50;
44  border-radius: 5px;
45}
46
47/* Firefox 用のスライダーのつまみ（サム） */
48.rangeInput::-moz-range-thumb {
49  height: 20px;
50  width: 20px;
51  border-radius: 50%;
52  background: #04aa6d;
53  cursor: pointer;
54  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
55}
56
57/* IE/Edge 用のスライダーのトラック */
58.rangeInput::-ms-track {
59  width: 100%;
60  height: 8px;
61  cursor: pointer;
62  background: transparent; /* デフォルトのトラック背景を透明に */
63  border-color: transparent; /* ボーダーも透明に */
64  color: transparent; /* 文字色も透明に（IE/Edgeの挙動対応） */
65}
66
67/* IE/Edge 用のスライダーのトラックの塗りつぶし部分（左側） */
68.rangeInput::-ms-fill-lower {
69  background: #4caf50;
70  border-radius: 5px;
71}
72
73/* IE/Edge 用のスライダーのトラックの塗りつぶし部分（右側） */
74.rangeInput::-ms-fill-upper {
75  background: #d3d3d3;
76  border-radius: 5px;
77}
78
79/* IE/Edge 用のスライダーのつまみ（サム） */
80.rangeInput::-ms-thumb {
81  height: 20px;
82  width: 20px;
83  border-radius: 50%;
84  background: #04aa6d;
85  cursor: pointer;
86  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
87  /* IE/Edgeではmargin-topは不要な場合が多い */
88}

このCSSサンプルコードは、ウェブページでよく使われる範囲選択スライダー、すなわちHTMLの<input type="range">要素の見た目を、さまざまなブラウザで一貫して美しくカスタマイズする方法を示しています。

rangeというキーワードは、このコードではHTMLの<input type="range">要素を指す文脈で使用されており、数値を範囲内で選択するためのスライダーを意味します。このキーワード自体に直接的な引数や戻り値はありません。

まず、.rangeInputクラスでは、スライダー全体の基本的な幅、高さ、背景色、角の丸み、そしてマウスカーソルが乗ったときの透明度の変化を設定しています。これは、ブラウザが標準で提供するスライダーの見た目をリセットし、基本的なスタイルを適用するためのものです。

次に、このコードの重要な点は、ブラウザごとに異なる独自セレクタ（ベンダープレフィックス付きセレクタ）を使用している点です。例えば、ChromeやSafariといったWebKit系のブラウザでは::-webkit-slider-runnable-trackでスライダーのレール部分を、::-webkit-slider-thumbでつまみ部分のスタイルを調整します。同様に、Firefoxには::-moz-range-trackと::-moz-range-thumb、IE/Edgeには::-ms-track、::-ms-fill-lower、::-ms-fill-upper、::-ms-thumbといった専用のセレクタが存在します。これらのセレクタを使い分けることで、各ブラウザのデフォルトスタイルを上書きし、ウェブサイトのデザインに合わせた統一されたスライダーの見た目を実現しています。

Copy
1/*
2 * HTML <input type="range"> 要素のカスタムスタイリング
3 * システムエンジニアを目指す初心者向けに、カスタムスライダーの基本的なスタイリングを示します。
4 * このスタイルは、ウェブキットベースのブラウザ (Chrome, Safari, Edge) と Firefox に対応しています。
5 */
6
7input[type="range"] {
8  -webkit-appearance: none; /* デフォルトのWebkitスタイルを無効にする */
9  width: 100%; /* スライダーの幅を親要素に合わせる */
10  height: 8px; /* スライダーの全体の高さ */
11  background: transparent; /* 背景はトラックで表現するため透明に */
12  margin: 10px 0; /* 上下のマージン */
13  cursor: pointer; /* カーソルをポインタに */
14}
15
16/* ウェブキット (Chrome, Safari, Edge) 向けのトラックのスタイル */
17input[type="range"]::-webkit-slider-runnable-track {
18  width: 100%;
19  height: 8px;
20  background: #ddd; /* トラックの背景色 */
21  border-radius: 4px; /* トラックの角を丸くする */
22}
23
24/* ウェブキット (Chrome, Safari, Edge) 向けのサム（つまみ）のスタイル */
25input[type="range"]::-webkit-slider-thumb {
26  -webkit-appearance: none; /* デフォルトのWebkitスタイルを無効にする */
27  height: 20px; /* サムの高さ */
28  width: 20px; /* サムの幅 */
29  background: #007bff; /* サムの色 */
30  border-radius: 50%; /* サムを円形にする */
31  margin-top: -6px; /* トラックの中央に配置するため調整 */
32  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); /* サムに影を追加 */
33}
34
35/* Firefox 向けのトラックのスタイル */
36input[type="range"]::-moz-range-track {
37  width: 100%;
38  height: 8px;
39  background: #ddd; /* トラックの背景色 */
40  border-radius: 4px; /* トラックの角を丸くする */
41}
42
43/* Firefox 向けのサム（つまみ）のスタイル */
44input[type="range"]::-moz-range-thumb {
45  height: 20px; /* サムの高さ */
46  width: 20px; /* サムの幅 */
47  background: #007bff; /* サムの色 */
48  border-radius: 50%; /* サムを円形にする */
49  border: none; /* 枠線なし */
50  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); /* サムに影を追加 */
51}
52
53/* スライダーがフォーカスされたときのスタイル */
54input[type="range"]:focus {
55  outline: none; /* デフォルトのアウトラインを無効にする */
56}
57
58/* フォーカス時のサムのスタイル（オプション） */
59input[type="range"]:focus::-webkit-slider-thumb {
60  background: #0056b3; /* フォーカス時のサムの色 */
61}
62
63input[type="range"]:focus::-moz-range-thumb {
64  background: #0056b3; /* フォーカス時のサムの色 */
65}

このCSSコードは、ウェブページで数値を範囲選択する際に利用されるHTMLの<input type="range">要素、いわゆる「レンジスライダー」の見た目を詳細にカスタマイズする方法を示しています。システムエンジニアを目指す方が、独自のユーザーインターフェースを構築する際に役立つ基本的なテクニックです。

まず、input[type="range"]セレクタでは、スライダー全体の幅や高さ、カーソルの形状といった基本的なスタイルを設定し、ブラウザのデフォルトの外観を無効化しています。レンジスライダーのスタイリングはブラウザによって特殊な擬似要素を使用する必要があり、このコードではウェブキット系のブラウザ（Chrome、Safari、Edgeなど）向けに::-webkit-slider-runnable-track（レールの部分）と::-webkit-slider-thumb（つまみの部分）を、Firefox向けには::-moz-range-trackと::-moz-range-thumbを用いて、それぞれの部品の見た目を定義しています。

具体的には、「トラック」と呼ばれるレール部分には背景色と角の丸みを設定し、スライダーの土台を形成しています。一方、「サム」と呼ばれるつまみ部分には、高さ、幅、背景色、角の丸み（円形にする場合はborder-radius: 50%）、そして影を適用し、ユーザーが操作しやすい視覚的な要素を提供しています。特に、margin-topプロパティを使って、つまみをトラックの中央に配置する微調整も行っています。また、スライダーがフォーカスされた際（:focus）には、つまみの色を変えることで、ユーザーに現在操作中の要素を分かりやすく示すインタラクティブな表現も加えています。このように、ブラウザごとの特性に対応しつつ、統一されたデザインのスライダーを実現できる点がポイントです。