CSSファイルをつなごう

HTML と CSS の役わけ

HTML はページの構造をつくるものでした。見出し、段落、リストと、それぞれの中身が何なのかをブラウザに伝えます。いっぽう CSS は、その中身をどう見せるかを決めます。色、文字の大きさ、余白といった見た目はぜんぶ CSS の担当です。

役わりを分けておくと、あとから配色だけ変えたいときに HTML をさわらずにすみます。だから見た目のルールは HTML の中ではなく、専用のファイルに書きます。

style.css をつくってつなぐ

CSS は style.css という別のファイルに書き、HTML の head から読み込みます。読み込みに使うのは link タグです。

rel はこのファイルの種類がスタイルシートであること、href はファイルの場所をあらわします。これを書き忘れると、CSS をいくら書いても画面は変わりません。うまくいかないときは、まずここを見にいきましょう。

そのうえで style.css に最初のルールを 1 つ書きます。

body はページ全体をさす箱です。その背景色を、少しあたたかみのある白にします。保存してプレビューの色が変われば、2 つのファイルがつながった証拠です。

1. head の中に link タグを書き、style.css を読み込む
2. style.css に body の background-color を書き、ページの背景色を変える