CSS ・ 色・背景
color
文字色
文字の色を指定します。色名・16進数（#）・rgb()・hsl() などの形式で書けます。
01
サンプルコード
HTML
1<p class="name">色名：brown</p>
2<p class="hex">16進数：#b68235</p>
3<p class="rgb">rgb()：rgb(0 102 153)</p>
4<p class="alpha">半透明：rgb(32 31 29 / 60%)</p>
CSS
1.name {
2 color: brown;
3}
4.hex {
5 color: #b68235;
6}
7.rgb {
8 color: rgb(0 102 153);
9}
10.alpha {
11 color: rgb(32 31 29 / 60%);
12}
02
実行結果
ブラウザでの表示
03
解説
color は文字の色を指定するプロパティです。親要素に指定すると子要素に継承されるため、body に基本の文字色を指定するのが一般的です。
よく使うのは #b68235 のような16進数です。# の後の6桁が、赤・緑・青をそれぞれ2桁ずつ表します。
rgb() や hsl() では / の後に透明度を書けます。少し薄い文字色をつくるときに便利です。
04
応用例・注意点
色の書き方
| 形式 | 説明 |
|---|---|
brown / white | 色名 |
#b68235 | 16進数（RGBを2桁ずつ） |
#b68235cc | 16進数8桁（最後の2桁が透明度） |
rgb(182 130 53) | 赤・緑・青を0〜255で |
hsl(36 55% 46%) | 色相・彩度・明度 |
currentColor | その要素の color の値 |
CSS変数で配色をまとめる
色を変数にしておくと、サイト全体の配色を1か所で変更できます。
CSS
1:root {
2 --color-text: #201f1d;
3 --color-accent: #b68235;
4}
5body {
6 color: var(--color-text);
7}
8a {
9 color: var(--color-accent);
10}
注意点
- 01背景色との差（コントラスト）が小さいと読みにくくなります。本文は4.5:1以上が目安です。
- 02色だけで情報を伝えないようにします（例：エラーは赤字だけでなく文章でも示す）。