CSS・はじめの一歩

文字や背景に色をつけよう

CSSの楽しさは、やっぱり色。文字色と背景色の付け方を覚えて、ページに命を吹き込もう。

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

色をつける書き方

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

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

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

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

色の名前は140種類以上

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

p {
  color: tomato;
}

色コードで、もっと細かく

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

h1 {
  color: #e8734e;
}

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

このレッスンのまとめ

  1. 文字色は color、背景色は background-color
  2. 色は名前でそのまま書ける（140種類以上）
  3. 文字色と背景色は組で考える（読みやすさのため）

できたら、coral や cornsilk を別の色名に変えて、好きな色をさがしてみましょう。 :::

やってみよう：ページに色をつける

文字色だけでなく背景もあわせて、ちゃんと色を選んでみましょう。style.css を、こう書きかえます。

body {
  background-color: cornsilk;
}

h1 {
  color: coral;
}

body はページ全体、h1 は名前の見出し。ページの背景がやさしいクリーム色に、名前がコーラル色になります。

ブラウザ表示。クリーム色の背景のページで、名前「しまちゃん」がコーラル色の見出しになっている
まわりはまだ明朝体のままですが、色がつくだけでぐっと “自分のページ” らしくなってきます。

よくある質問

色の名前以外の指定方法は？
#ff8a3dのようなカラーコード（16進数）がいちばんよく使われます。配色サイトで見つけた色は、カラーコードをコピーしてそのまま貼り付けられます。
背景色が思ったより広い範囲についてしまうのはなぜ？
背景色はその要素の箱全体につくためです。h1のようなブロック要素は横いっぱいに広がるので、帯のようになります。文字の部分だけに色をつけたいときは、その部分をspanで囲んで指定します。
文字が読みにくいと言われたら？
文字色と背景色の明るさの差（コントラスト）が足りていない状態です。背景が薄い色なら文字は濃く、背景が濃いなら文字は明るく——2つの色は必ず組で考えましょう。