第5章：CSSでユニフォームを着せよう！ | 進くんと学ぶ！Webサイト制作

猪狩進

いよいよCSSの登場だね！CSSを使うと、文字の色や大きさ、背景色、配置などを自由自在にデザインできるようになるよ。
チームのユニフォームを決めるみたいに、楽しくサイトを着飾っていこう！

1. CSSの基本構文（3つの要素）

CSSは、「誰を（セレクタ）」「何を（プロパティ）」「どうする（値）」という3つの要素で指定します。

CSSの書き方

セレクタ {
         プロパティ: 値;
         }

例えば「見出し（h2）の文字色を青色にして、文字サイズを20pxにする」場合は、次のように書きます。

style.css

h2 {
    color: blue;
    font-size: 20px;
    }

用語	読み方	進くんの解説
`セレクタ`	セレクタ	「誰（どのタグ）に着せるか」を指定するよ。`h1` や `p` などを指定するんだ。
`プロパティ`	プロパティ	「何の見た目を変えるか」だよ。`color`（色）や `font-size`（サイズ）などがあるよ。
`値`	あたい / バリュー	「どんなデザインにするか」だよ。色名（`red`）や数値（`16px`）で指定するんだ。

💡 進くんのワンポイント・アドバイス

末尾の ;（セミコロン）を付け忘れると、次の行のスタイルが効かなくなってしまうんだ。野球で言うとボールデッドみたいなものだから、しっかり書く癖をつけよう！

CSSのコードは、別ファイル（例：style.css）として保存し、HTMLの <head> タグの中で読み込ませるのが一般的です。

index.html の <head> 内に記述

<head>
    <meta charset="UTF-8">
    <title>僕の野球部サイト</title>
    <!-- style.css を読み込む -->
    <link rel="stylesheet" href="style.css">
</head>

💡 進くんのワンポイント・アドバイス

CSSのコードは別のファイルで保存して外部ファイルとして呼び出すのが基本だけど、「ファイルを分けたらファイルの数が多くなりすぎて管理が難しくなっちゃった…」という場合は無理に分けなくてもいいよ！形式にこだわって管理ができなくなったら本末転倒だからね。

🔍 特定の場所だけデザインを変えたい時は？

「この段落だけ赤文字にしたい！」という時は、HTMLに <p class="point"> のように名前をつけて、CSSで .point { color: red; } と（頭にピリオドをつけて）指定すると、ピンポイントで着せ替えができるよ！

猪狩進

例えば、いま見ているこのページは742行あるcssファイルを読み込んでいるんだ。そのコードをすべてhtmlファイルを内に書くとかなり長くなってしまうけど、外部ファイルに分離しているおかげですっきりしたコードになってるんだよ。

まずはこれだけ覚えればWebサイトがぐっとかっこよくなる基本のプロパティです。

猪狩進

CSSの基本形『セレクタ { プロパティ: 値; }』は掴めたかな？
これが分かれば、自分のWebサイトを思い通りのチームカラーに染め上げることができるよ！基本編はこれでクリアだね、おめでとう！

🎉 全5章のレッスン読破、おめでとう！進くんが待っているよ！