VIDEO LESSON

CSSのaccent-colorの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:30動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、アクセント・カラーです。
0:06フォームを作っていると、チェックボックスのチェックの色や、ラジオボタンの丸の色が、
0:11ブラウザー標準の青色のままで、サイトの配色と合わないと感じることがあります。
0:17これらの部品はブラウザーが描くため、ふつうの文字色や背景色の指定では色を変えられません。
0:23アクセント・カラーは、そうした標準部品のアクセント色、つまり選択状態を表す色を指定するためのプロパティです。
0:31基本の書き方から実例、効かないときの確認まで、順番に見ていきましょう。
0:36書き方を確認します。
0:38アクセント・カラーは、対象の要素に値をひとつ書くだけです。
0:42たとえばクラス名デモを持つ要素へ、プロパティ名、コロン、値として色のコード、
0:46セミコロンと書きます。
0:49この例では、シャープ・キュービー・ヨン・ゴー・イチ・ディーという、茶色系の色を指定しています。
0:56宣言の形そのものは、ほかの色指定のプロパティと同じです。
1:00効かせたい部品そのものに書くのが基本ですが、継承する性質があるため、フォーム全体を包む親要素に書いて、
1:05まとめて効かせることもできます。
1:10まずはチェックボックスひとつに書いて、色が変わることを確かめるところから始めてください。
1:17指定できる値の読み方です。
1:19値は大きく分けて二種類です。
1:21ひとつはオートで、ブラウザーが決める標準のアクセント色を使う、という意味です。
1:26もうひとつは色そのもので、チェックが入ったときの地の色などに、その色が使われます。
1:32色の書き方はいつも通りで、十六進数のコードのほか、カラーネームやアールジービーなどの関数でも指定できます。
1:39ポイントは、指定するのはあくまでアクセントになる一色だけだ、ということです。
1:44チェックマーク自体の形や、部品の枠線、文字の色までを個別に決めるプロパティではありません。
1:50一色を渡すと、ブラウザーがその部品に合う形で使ってくれる、と覚えてください。
1:55初期値と継承を確認します。
1:57初期値はオートで、継承はします。
2:00オートの間は、ブラウザーやオーエスが用意した標準のアクセント色で描かれます。
2:06継承する、というのは、親の要素に書けば内側の部品へ自動で伝わる性質です。
2:12そのため、フォーム全体に同じ色を効かせたいときは、親に一回書くだけで済みます。
2:18汎用的な値も書けます。
2:20親の計算値を使うインヘリット、仕様の初期値に戻すイニシャル、アンセットは継承するプロパティなのでインヘリットと同じ扱いです。
2:30ただし、部品側に別の指定があれば、そちらが優先されます。
2:35部分ごとに色を変えたいときは、この上書きの仕組みを使います。
2:40効く範囲を確認します。
2:41対象になるのは、ブラウザーが描くネイティブなフォーム部品です。
2:46代表例は、チェックボックス、ラジオボタン、レンジ入力、いわゆるスライダー、
2:51そしてプログレスバーの進捗部分などです。
2:55一方で、注意点もあります。
2:57すべての部品の、すべての状態の色を指定できるわけではありません。
3:02たとえば、チェックが入っていないときの枠の色や、ホバーしたときの色まで細かく決めることは、
3:07このプロパティの役目ではありません。
3:11また、見え方はブラウザーやオーエスによって少しずつ違います。
3:16自分の環境だけで判断せず、複数のブラウザーで表示を確認することが大切です。
3:22実例を見ていきます。
3:23まずエイチティーエムエルの用意です。
3:25ステージという箱の中にラベルを置き、その中にチェックボックスと文章を入れます。
3:31チェックボックスには、クラス名デモと、タイプ属性のチェックボックス、そして最初からチェックが入った状態にするチェックド属性を付けます。
3:40頭の部分には、スタイルシートを読み込むリンクを置いてください。
3:44ラベルで部品と文章を包んでおくと、文章をクリックしてもチェックを切り替えられます。
3:50次のシーエスエスで、このチェックの色がどう変わるかを確認します。
3:54次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
3:59まずステージとデモに、余白や枠線、背景色などの土台の見た目を整えます。
4:06デモには幅と高さに一点五レムを指定して、チェックボックス自体を少し大きくし、
4:10変化を見やすくしています。
4:15そして最後に、今回の主役であるアクセント・カラーをデモへ追加します。
4:21色はシャープ・キュービー・ヨン・ゴー・イチ・ディー、茶色系の色です。
4:27これで、チェックが入ったときの地の色が、ブラウザー標準の青からこの色へ変わります。
4:34土台の指定は変えず、最後の一行だけが主役だ、という点に注目してください。
4:41値を変えて比べてみましょう。
4:43最後のアクセント・カラーの値だけを、シャープ・ニーハチ・ゴーロク・ヨンゼロという緑系の色に置き換えます。
4:51ファイルを保存してブラウザーを再読み込みすると、チェックの地の色が茶色から緑へ変わります。
4:58比較のコツは、変えるのはこの値ひとつだけにすることです。
5:02ほかの指定はそのままにして、色だけが結果にどう影響したかを確認してください。
5:08また、チェックを外した状態と入れた状態の両方を見比べると、どの部分にアクセント色が使われているのかが、
5:12はっきり分かります。
5:17応用として、まとめて指定する使い方です。
5:20アクセント・カラーは継承するので、フォーム要素やページのルートに書けば、
5:25内側のチェックボックスやラジオボタンへ一括で伝わります。
5:30サイト全体のテーマカラーをひとつ決めておけば、部品ごとに書く手間がなくなり、
5:34色のばらつきも防げます。
5:38ただし、選ぶ色には注意してください。
5:41チェックの地の色が薄すぎると、チェックマークとのコントラストが足りず、選択状態が見分けにくくなります。
5:49白いチェックがはっきり見える、十分に濃い色を選ぶことが大切です。
5:54一部の部品だけ色を変えたい場合は、その部品に直接書いて上書きします。
5:59効かないときの確認手順です。
6:01まず、対象がブラウザーの標準部品かどうかを思い出してください。
6:06画像やシーエスエスだけで自作した見た目の部品には、このプロパティは効きません。
6:13次に開発者ツールを開き、ネットワークでスタイルシートが取得できているか、
6:18エレメンツで対象のクラスとセレクターが一致しているかを見ます。
6:24スタイルズで宣言が打ち消し線になっていれば、別の宣言に負けています。
6:29コンピューテッドでアクセント・カラーの最終的な値も確認できます。
6:34それでも変わって見えないときは、チェックが入った状態で見ているかも確認してください。
6:41アクセント色は主に、選択された状態に現れます。
6:45最後に互換性とまとめです。
6:47ブラウザーの対応は、クロームとエッジが九十三以降、ファイアフォックスが九十二以降、
6:54サファリが二十六・二以降で、現在の主要ブラウザーでは広く使えます。
7:00練習としては、まず茶色と緑色、二つの指定の違いを言葉で説明し、次に値だけを変えて結果を比べてみてください。
7:09まとめます。
7:10アクセント・カラーは、チェックボックスなどの標準部品の、選択状態の色を指定するプロパティです。
7:19初期値はオート、継承はします。
7:21一色を渡すだけで、ブラウザーが部品に合わせて使ってくれる、という手軽さが特徴です。
7:28お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

accent-colorの役割と主な指定値を解説。チェックボックスなどの選択色が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのaccent-colorの使い方：指定値・実例・効かない原因とブラウザー互換性 →