CSSってなに？ページに色とかざりをつけよう

たける 前回のページ、ちょっとさみしい見た目でしたよね…。色をつけたいです！

りこ そこで CSS。HTMLが「ほね組み」なら、CSSは「服やかざりつけ」。同じページを着せ替えるイメージだよ。

CSSは「着せ替え」

CSS（シー・エス・エス）は、ページの見た目を決めることばです。文字の色、大きさ、背景の色などを変えられます。

HTMLが「ほね組み」、CSSが「服・かざり」。同じほね組みでも、CSSをかえれば見た目はガラッと変わります。

CSSの書き方

CSSは、どこを・なにを・どうするの3つを書きます。

どこを {
  なにを: どうする;
}

たとえば「h1 の文字を赤くする」なら、こうです。

h1 {
  color: red;
}

• h1 … どこを（変えたい場所）
• color … なにを（色のこと）
• red … どうする（赤に）

最後の ;（セミコロン）を忘れずに。「ここで1つおわり」というしるしです。

前回のページに色をつけてみる

前回のHTMLに、こんなCSSをつけてみましょう。

h1 {
  color: red;
  font-size: 40px;
}
p {
  color: blue;
}
body {
  background-color: lightyellow;
}

• font-size: 40px; … 文字の大きさを40の大きさに
• background-color … 背景の色
• lightyellow … うすい黄色

すると、見た目はこう変わります。

同じ文章なのに、色と大きさと背景が変わりましたね。これがCSSの力です。

たける おおー！いっきにそれっぽくなった！色は英語で書くんですね。

りこ そう。`red`・`blue`・`green` みたいに、ことばで書ける色がたくさんある。まずはそれで十分。

よく使う「なにを」たち

最初はこのくらい知っていれば、いろいろ着せ替えできます。

やってみよう

色を red から green や hotpink に変えると、どうなるでしょう？　font-size の数字を 60px にすると？　いろいろ変えて、見た目がどう変わるか試してみてください（試せる場所は第6回で用意します）。

まとめ

• CSSはページの見た目を決めることば（HTMLの「ほね組み」を着せ替える）
• 書き方は どこを { なにを: どうする; }
• color（文字色）・font-size（大きさ）・background-color（背景色）が基本
• 色は red blue のようにことばで書ける

次の第4回では、ページに動きをつける JavaScript を学びます。ボタンをおすと文字が変わる、あの動きです。

確認してみる

第2回のindex.htmlに <style>h1 { color: green; }</style> を追加して開く。見出しだけが緑になれば、セレクターの対象を確認できる。

仕様・手順の参照先