TOP → IT関連覚え書き → css → This Page
動作環境はGoogle Chrome（128.0.6613.138）とMicrosoft Edge（129.0.2792.52）です。
（いずれもチェックまたは値がある部分の色）
Sample
ブラウザでの表示
それぞれ赤色になっているのが分かると思います。
ブラウザでの表示
確かに指定した黄色にはなっています。
が、赤を指定した場合はチェックのレ点やラジオボタンの丸枠、レンジやプログレスの右側は白や薄いグレーだったのに
黄色を指定した場合は黒に近い濃いグレーになってしまっています。
これは「白色に対してのコントラスト比」が低い色を指定すると、
ブラウザが自動的にダークモードにしてしまうからのようです。
こういった問題を回避したい場合はコンストラクト比が高い色を指定するようにしましょう。
:hoverはマウスをのせたとき、:activeはクリック等やドラッグ中などの設定です。
上記サンプルではマウスをのせたときは緑色、クリック中は青色になるように設定しました。
ちなみに色の設定は16進数で99を設定しているので10進数で153となります。
ブラウザでの表示（マウスオーバー）
ブラウザでの表示（クリック中）
画面キャプチャをとるとマウスが消えてしまうので少し分かりにくいですが、
確かにチェックボックスにマウスをのせた場合は緑色に、チェックボックスをクリック中は青色になりました。
一見、めでたしめでたしです。
が、残念ながらもっと詳細に見てみると・・・
Windows標準ソフトである「ペイント」で指定された色を確認してみます。
「ペイント」では10進数で表示されています。
設定では10進数で153を指定していたはずなのに
それぞれ97,209と異なる値の色になっていますね。。。
ある程度近い色にはなっているけど微妙に違う。
ちなみに理由や回避策はネットを調べても「日本語サイト」では１つも見つかりませんでした。。。
海外サイトでは以下の情報を見つけました。
https://tailwindcss.com/docs/accent-color
赤枠で囲った部分ですが、要は「ブラウザーが色の明るさを自動調節するため微妙に指定色と異なる結果になるよ」
とのこと。
回避策もなさそうです。
厳密な色を設定したい場合は要注意です。
TOP → IT関連覚え書き → css → This Page
accent-color(css)の注意点
前置き
ここではcssのaccent-color利用時の注意点を２つ紹介します。動作環境はGoogle Chrome（128.0.6613.138）とMicrosoft Edge（129.0.2792.52）です。
accent-colorとは
チェックボックス、ラジオボタン、レンジスライダー、プログレスバーの色を変更することが出来るスタイル。（いずれもチェックまたは値がある部分の色）
Sample
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<style type="text/css">
.sample {
/* 赤 */
accent-color: #990000;
}
</style>
</head>
<body>
<input name="c" class="sample" type="checkbox" value="1" checked="checked" />チェックボックス<br/>
<input name="r1" class="sample" type="radio" value="1" checked="checked" />
<input name="r" class="sample" type="radio" value="1" />ラジオボタン<br/>
<input name="r2" class="sample" type="range" min="0" max="100" value="50" />レンジスライダー<br/>
<progress id="p" class="sample" max="100" value="70">70%</progress>プログレスバー<br/>
</body>
</html>
|
ブラウザでの表示
それぞれ赤色になっているのが分かると思います。
注意点１：指定した色によって見た目が変わる
先ほどのサンプルでカラー設定を少し変えてみましょう。
.sample {
/* 黄色 */
accent-color: #ffff00;
}
|
ブラウザでの表示
確かに指定した黄色にはなっています。
が、赤を指定した場合はチェックのレ点やラジオボタンの丸枠、レンジやプログレスの右側は白や薄いグレーだったのに
黄色を指定した場合は黒に近い濃いグレーになってしまっています。
これは「白色に対してのコントラスト比」が低い色を指定すると、
ブラウザが自動的にダークモードにしてしまうからのようです。
こういった問題を回避したい場合はコンストラクト比が高い色を指定するようにしましょう。
注意点２：hoverやactiveは指定した色と微妙に異なる色になる
最初のサンプルにスタイル設定を追加してみましょう。
.sample:hover {
/* 緑 */
accent-color: #009900;
}
.sample:active {
/* 青 */
accent-color: #000099;
}
|
:hoverはマウスをのせたとき、:activeはクリック等やドラッグ中などの設定です。
上記サンプルではマウスをのせたときは緑色、クリック中は青色になるように設定しました。
ちなみに色の設定は16進数で99を設定しているので10進数で153となります。
ブラウザでの表示（マウスオーバー）
ブラウザでの表示（クリック中）
画面キャプチャをとるとマウスが消えてしまうので少し分かりにくいですが、
確かにチェックボックスにマウスをのせた場合は緑色に、チェックボックスをクリック中は青色になりました。
一見、めでたしめでたしです。
が、残念ながらもっと詳細に見てみると・・・
Windows標準ソフトである「ペイント」で指定された色を確認してみます。
「ペイント」では10進数で表示されています。
設定では10進数で153を指定していたはずなのに
それぞれ97,209と異なる値の色になっていますね。。。
ある程度近い色にはなっているけど微妙に違う。
ちなみに理由や回避策はネットを調べても「日本語サイト」では１つも見つかりませんでした。。。
海外サイトでは以下の情報を見つけました。
https://tailwindcss.com/docs/accent-color
赤枠で囲った部分ですが、要は「ブラウザーが色の明るさを自動調節するため微妙に指定色と異なる結果になるよ」
とのこと。
回避策もなさそうです。
厳密な色を設定したい場合は要注意です。
更新履歴
2024/10/26 新規作成
TOP → IT関連覚え書き → css → This Page