今回はHTMLにCSSを読み込んで、背景の色を変えるところまで一気にいきます！
STEP1. HTMLファイルをつくる
まずは簡単なHTMLファイルをつくります。あくまでHTMLがメインでCSSはサブ、中心となるHTMLからサブとなるCSSを読み込むというイメージをもっておくと分かりやすいです。
例えばこんな内容の index.html というファイルをつくります。
<html>
<body>
<h1>初めてのCSS</h1>
</body>
</html>
STEP2. CSSファイルをつくる
CSSファイルをつくるのは簡単です。
STEP1でつくったHTMLファイルと同じフォルダにCSSファイルをつくります。
ファイル名は何でもいいですが、 style.css のように拡張子を css にしてください。
ファイルの中は空のままで大丈夫です。
STEP3. CSSファイルをHTMLで読み込む
いよいよCSSファイルをHTMLファイルから読み込みます。
STEP1で作成したHTMLファイルのbodyタグの上にこのように3行追加してください。
（ style.css のところには作成したCSSファイル名を書いてください）
<head>
<link rel="stylesheet" href="style.css">
</head>
HTMLファイル全体はこのようになります。
<html>
<head> <!-- ←追加 -->
<link rel="stylesheet" href="style.css"> <!-- ←追加 -->
</head> <!-- ←追加 -->
<body>
<h1>初めてのCSS</h1>
</body>
</html>
STEP4. 背景の色を変える
これでHTMLファイルを開くと同時にCSSファイルも読み込まれるようになりました。
ちゃんと読み込みできているか背景の色を黄色(yellow)に変えてみます。
CSSファイルに、
body {
background-color: yellow;
}
と書いてみてください。
そしてHTMLファイルを表示してみます。
背景が黄色になったのが確認できましたか？
yellowの部分をblueやredにすると色が変わることも確認出来ます。
うまくいかなかった人は、
- HTMLで読み込んだファイル名が間違っていないか
- HTMLファイルと同じフォルダ内にCSSファイルがあるか
など確認してみてください。
最後に
これでCSSファイルを書いていく準備が整いました。
あとは、どうやったら文字の大きさを変えられるのかや文字の色を変えられるのかを実践していくだけです。
次から早速いろんな書き方を一緒にやっていきましょう！