- CSS が「見た目の係（かかり）」だと分かる
- 色・大きさ・余白 を自分で変えられる
- セレクタで「どこに」効かせるかが分かる
だい8でつくった自己しょうかいページをつかいます。15〜20分。
CSSってなに？
HTMLが「なにを書くか（見出し・文・画像）」だとしたら、CSS は「それをどう見せるか」の係です。色をつけたり、文字を大きくしたり、まわりにすき間（余白）をつけたり。おなじHTMLでも、CSS しだいで見た目はガラッと変わります。
3つの書き方
CSS は書く場所が3とおりあります。きょうは ① と ② をつかいます。
① タグに直接かく（style 属性）
<p style="color:red">あかい文字</p>
② <style> タグの中にまとめてかく
<style>
p { color: blue; font-size: 24px; }
</style>
① は1か所だけ。② はページ全体のルールをまとめて書けるので、こっちのほうがすっきりします。
セレクタ：どこに効かせる？
② の p { … } の p のところを セレクタ といいます。「どのタグに効かせるか」のあて先です。p と書くと、ページの ぜんぶの <p> に効きます。
/* ぜんぶの p に効く */
p {
color: blue; /* 文字の色 */
font-size: 24px; /* 文字の大きさ */
background: #eee; /* せ景の色 */
padding: 12px; /* 内がわの余白 */
}
まずはこの4つ — color・font-size・background・padding — だけ覚えれば十分です。
だい8の自己しょうかいページをひらいて、つぎの3つをやってみよう。
</head>の前に<style></style>を足す- 見出しの文字を大きく、色をつける 例：
h1 { font-size: 40px; color: deeppink; } - せ景色と余白をつけて、ボタン風の見た目に 例：
a { background: orange; padding: 12px; color: white; }
ファイルを保ぞんして、ブラウザをこうしん（リロード）すると、見た目が変わるはず！
💡 AI にきいてみよう：「文字を中央にそろえるには CSS でどう書くの？」と聞いてみよう。出てきた書き方を
<style> の中に入れて、ほんとうに中央にそろうかためしてみよう。
- CSS は何をする係？（→ 見た目をきめる。色・大きさ・余白など）
- 文字の大きさを変えるのは、どのプロパティ？（→
font-size） - セレクタは何を指す？（→ どのタグに効かせるかのあて先。例：
p）
つぎの回では、ここまでで学んだことをつかって「自分の学習HTML」を1枚つくり、本物のサイトに出します。