accent-color:一部の要素の強調色を指定する
初期値 | auto |
適用対象 | 全ての要素 |
継承 | する |
アニメーション | 計算値の型による |
対応ブラウザ | caniuseで確認 |
accent-colorプロパティの説明
accent-color
は、一部の要素で生成されるユーザーインターフェイスの強調色を指定します。この機能に対応しているのは、主に以下の要素となります。
accent-colorに指定できる値
- auto
- ユーザーエージェントのスタイルに従います。
- <color>
- 色を指定する
<color>
の値を指定します。<color>
は、CSSで一つの色を表すデータ型の文字列です。使用できる形式は、キーワード、16進数、RBG値、HSL値などがあります。
accent-colorの使い方とサンプル
accent-color
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
accent-color: auto;
accent-color: red;
accent-color: green;
accent-color: blue;
/* 16進数 */
accent-color: #f00;
accent-color: #ff0000;
/* RBG値 */
accent-color: rgb(255, 0, 0);
accent-color: rgba(255, 0, 0, 0.5);
/* HSL値 */
accent-color: hsl(0, 100%, 50%);
accent-color: hsla(0, 100%, 50%, 0.5);
/* グローバル値 */
accent-color: initial;
accent-color: inherit;
accent-color: revert;
accent-color: unset;
accent-colorの実例
それでは、実際にaccent-color
の書き方を見ていきましょう。以下の内容で、入力・送信フォームのチェックボックスにaccent-color
を適用した時の挙動を確認できます。
CSS
#acolor_sample input {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
}
#acolor_sample input#ac1 {
accent-color: auto;
}
#acolor_sample input#ac2 {
accent-color: red;
}
#acolor_sample input#ac3 {
accent-color: #00ff66;
}
HTML
<div id="acolor_sample">
<input type="checkbox" id="ac1" checked>
<label for="ac1">auto</label><br>
<input type="checkbox" id="ac2">
<label for="ac2">red</label><br>
<input type="checkbox" id="ac3">
<label for="ac3">#00ff66</label><br>
</div>
表示確認
accent-colorに関連するCSSプロパティ
要素の装飾や描画指定 | |
---|---|
accent-color | 一部の要素の強調色を指定する |
all | 要素の全てのプロパティを初期化する |
appearance | ブラウザが独自に描画する標準的なUIをCSSで変更できるようにする |
caret-color | テキストの挿入位置や選択補助として表示されるキャレットの色を指定する |
cursor | マウスポインタのカーソルの種類を指定する |
filter | 画像やテキストにフィルタ効果を与える |
isolation | 要素のスタッキング・コンテキストを制御する |
mix-blend-mode | 重なり合った要素の内容と背景に対して描画モードを指定する |
opacity | 要素の不透明度を指定する |
scroll-behavior | スクロールが発生した場合の挙動を指定する |
user-select | ユーザーがテキストを選択できるかどうかを指定する |