HTMLはページの「骨組み」でしたね。でも骨組みだけだと、文字は真っ黒・背景は真っ白でそっけない。そこに色や大きさ、配置といった”見た目”を着せてあげるのがCSSです。
HTMLとCSSの役割分担
| 言葉 | 担当 |
|---|---|
| HTML | 「ここは見出し」「ここは段落」という中身・構造 |
| CSS | 「その見出しを青く、大きく」という見た目 |
服を着替えても中身の人は変わらないように、CSSを変えてもHTMLの中身はそのまま。見た目だけを自由に変えられます。
着せ替えができる、うれしさ
なぜわざわざ分けるの？と思うかもしれません。いちばんのごほうびは、着せ替えが自由なこと。
同じHTML（中身）に、あかるい服のCSSを着せれば元気なページに、落ち着いた服のCSSを着せれば大人っぽいページに。中身を1文字も触らずに、雰囲気だけをまるっと変えられる。これが「分けておく」ことのいちばんの気持ちよさです。
こんなことができる
CSSでできることを、ちょっとだけのぞいてみましょう（今は「へぇ」で十分）。
- 文字の色を変える
- 文字を大きく・小さくする
- まわりにすき間（余白）をつくる
- 背景に色をしく
どれも「見た目」の話ばかり。見えるものの調整は、だいたいCSSのしごと、と覚えておけば大丈夫です。
このレッスンのまとめ
- CSSは見た目を担当する言葉
- HTML（中身）とCSS（見た目）は役割が分かれている
- 中身はそのままに、見た目だけを着せ替えできる