CSSとは何か

HTML は中身、CSS は見た目

前回、名前を h1 にしたら文字が大きく太くなりました。あれはブラウザがもともと持っている見た目の設定です。自分で見た目を決めたいときに使うのが CSS です。

役割の分け方はとてもはっきりしています。HTML は「何が書いてあるか」を担当し、CSS は「どう見えるか」を担当します。文章はそのままで色や大きさだけ変えたいとき、HTML を触らずに CSS だけ書き替えれば済みます。

書き方をのぞいてみる

CSS は次の形で書きます。

h1 の部分が「どの要素に当てるか」で、セレクタと呼びます。波かっこの中が「どう見せるか」で、color が色を指す名前、#0071e3 がその値です。この # から始まる6桁は色を表す番号で、これは青になります。

今回だけ、CSS を HTML と同じファイルの中に <style> で書きます。本来 CSS は style.css という別のファイルに分けて書くのがふつうで、次のコース1回目でその形に移します。ここでは色が変わる手ごたえだけ味わってください。

1. h1 の下に style タグを書き足す
2. style の中で h1 に color を指定し、見出しの色を変える