文字の装飾
color
color は、文字の色を指定します。色を省略した枠線や下線などもこの色になり、中の要素にも引き継がれます。
構文
<color>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
border: 6px solid;
color: #4a86cb;
}コントロール
color#4a86cb
解説
色の書き方
- 名前：
crimsonやrebeccapurpleなど、決まった名前で書けます。 - 16 進数：
#4a86cbのように赤・緑・青を 2 桁ずつ書きます。#48cのような 3 桁の省略形や、透明度を足した#4a86cb80も書けます。 - 関数：
rgb(31 41 55 / 40%)、hsl(210 55% 54%)、oklch(65% 0.12 250)などで書けます。/のあとに書くのが透明度です。 transparentは透明、currentcolorはその要素の color の値です。
文字以外にも効く
枠線（border）、outline、下線（text-decoration）、影（box-shadow・text-shadow）などは、色を省略すると color の色（currentcolor）になります。このページのプレビューでも、枠線は 6px solid と色を書いていないので、color を変えると一緒に変わります。
気をつけること
- 継承するので、
bodyなどに 1 回書けば、中の文字がすべてその色になります。 - 半透明の色にすると文字だけが透けます。
opacityは背景や中の要素ごと透けるので、文字だけを薄くしたいときは color の透明度を使います。 - 背景との明るさの差が小さいと読みにくくなります。WCAG では、ふつうの大きさの文字で 4.5 : 1 以上のコントラスト比が目安です。