foreground文字の前景色
背景を塗るbackground-colorとは違い、文字や装飾の基準色になります。
color
テキストの前景色を指定するプロパティ。文字と背景の組み合わせを見比べながら選びます。
遊んでみよう
見てわかるCSS
この文字の色が変わりますCSS
.element color: #7258e8;
値のパターン
colorの構成要素
inherit子要素へ継承される
親に指定したcolorは、別の色を持たない子要素へ引き継がれます。
currentColorほかの線にも使える
currentColorを使うと、borderやアイコンを文字と同じ色にできます。
早見表
HEX、色名、rgb()などが使えます。背景との明暗差も一緒に確認します。
01
#7258e8HEX16進数02
rebeccapurple色名キーワード03
rgb(114 88 232)RGB光の3原色04
currentColor現在の文字色再利用よくある使い方
01
本文の読みやすさを整える
真っ黒より少しやわらかい濃色にすると、長文でも読みやすくできます。
color: #202033;02
リンクを見分ける
本文と違う色を使い、クリックできる場所を視覚的に伝えます。
color: #5b46c8;03
状態を色で補助する
成功や注意のラベルへ色を添えます。色だけで意味を伝えないことも大切です。
color: #0f735f;ポイント
背景色とのコントラストを確認しよう。
文字色だけがきれいでも、背景と明るさが近いと読みにくくなります。本文やボタンでは、色を決めるときに背景との組み合わせを必ず確認します。
関連するCSSも見てみよう。
color と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。