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 は名前の見出し。ページの背景がやさしいクリーム色に、名前がコーラル色になります。

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