CSS中級

なぜ大事?

中身を書き換えずに、見た目だけを変えられます。 文字を大きく、色を変える、並べかたを変える。バイブコーディングで「もう少し見やすく」と頼んだとき、AIが書き換えているのはたいていここです。

やさしい解説

HTMLが骨なら、CSSは服です。同じ骨に別の服を着せれば、まったく違う見た目になります。実際、中身を1文字も変えずに、明るい見た目と暗い見た目を切り替えられます。

書きかたは、どれを・どうするかの2つだけです。

h1 { color: #2D6A4F; font-size: 28px; }

「見出しを、この緑色で、28ピクセルの大きさに」。それだけです。

難しくなるのは、指示が重なったときです。「見出しは緑」「このページの見出しは黒」と2つ書いたら、どちらが勝つのか。この優先順位の争いが、CSSでいちばん人を悩ませるところです。名前の頭にある「カスケーディング」は、この上から流れ落ちる仕組みのことを指しています。

例文

• 「色を変えたいんだけど」「CSSだね。中身はそのままで見た目だけ変えられるよ」
• 「直したのに反映されない」「別のところの指示が勝ってるのかも。CSSはよくあるんだ」