色の名前以外の指定方法は？

#ff8a3dのようなカラーコード（16進数）がいちばんよく使われます。配色サイトで見つけた色は、カラーコードをコピーしてそのまま貼り付けられます。

背景色が思ったより広い範囲についてしまうのはなぜ？

背景色はその要素の箱全体につくためです。h1のようなブロック要素は横いっぱいに広がるので、帯のようになります。文字の部分だけに色をつけたいときは、その部分をspanで囲んで指定します。

文字色と背景色の明るさの差（コントラスト）が足りていない状態です。背景が薄い色なら文字は濃く、背景が濃いなら文字は明るく——2つの色は必ず組で考えましょう。

セレクタの形がわかったら、いよいよ色をつけてみます。CSSでいちばん最初に”変わった！“を実感できるのが色です。真っ白なページに、あなたの好きな色をのせてみましょう。

h1 {
  color: white;
  background-color: teal;
}

「見出しの文字を白に、背景を青緑に」という意味。色の名前（red blue teal …）はそのまま書けます。「{ } の中に指定を並べる」が、さっそく役に立っていますね。

プロパティ	変えるもの
`color`	文字の色
`background-color`	背景の色

この2つはよく似ていて、つい混ざります。「color は文字そのもの、background- がつくと背景」と、セットで覚えておきましょう。

同じ文でも、color と background-color では色のつく場所がまるで違います。

color は文字そのものの色、background-color は箱ぜんぶに広がる背景の色。2つを組で選ぶと、読みやすい配色になります。

red blue のような基本の色だけでなく、tomato（トマト）skyblue（空色）gold（金）など、名前で呼べる色は140種類以上あります。まずは知っている名前を打ってみて、変化を楽しむのがいちばんの上達法です。

p {
  color: tomato;
}

名前にない微妙な色あいを選びたいときは、#ff0000（赤）のような色コードを使います。# のうしろに続く6桁が、色の正体です。

h1 {
  color: #e8734e;
}

6桁は2桁ずつ3組に分かれていて、それぞれ赤・緑・青の濃さを表します（00〜ffの256段階）。名前で呼べる色は140種類ほどですが、コードなら1600万色以上から選び放題。デザインツールで見つけた色をそのままコピーしてこられるのも便利なところです。

background-colorは、文字のまわりだけでなくその要素の箱全体につきます。h1のような要素は横いっぱいに広がるので、背景色は横に伸びた帯のようになります。

h1 {
  background-color: teal;
}

もし文字の部分だけに色をつけたいときは、その部分を<span>で囲んで、spanだけにbackground-colorを指定します。「背景色は箱につく」と知っておくと、思わぬ広がり方に驚かずにすみます。

h1のような要素は横いっぱいに広がるので背景は帯に、spanで囲んだところは文字の分だけに背景がつきます。

colorとbackground-colorの書き方がわかっても、「どの色とどの色を組み合わせればいいか」は別の悩みです。これはセンスというより道具で解決できるところ。プロも配色サイトから選ぶことがよくあります。