Day 2・CSSの考え方 — 見た目を整える
CSSの基本 — どの要素を、どう見せるか
セレクタは宛名、プロパティは指示。CSSは「誰に」「何をする」を書く手紙だと考える。
HTMLは骨組み、CSSは服
前回、は建物の骨組みだと話しました。骨組みだけの家は、柱や部屋の役割はあっても、壁の色も床の質感もありません。そこに色を塗り、家具を置き、見た目を整えるのがです。同じ骨組みでも、CSS次第で真っ白なオフィスにも、あたたかい木の家にもなります。
つまりHTMLは「何があるか」、CSSは「それをどう見せるか」を担当します。この二つが別々になっているおかげで、中身をいじらずに見た目だけを着せ替えできるのです。
たとえるなら
HTMLは人間の体、CSSはその人が着ている服とメイク。体(中身)はそのままに、服(見た目)だけ変えれば印象がガラッと変わります。
CSSの一行は「宛名 + 指示」
CSSの基本は、たった一つの形の繰り返しです。「誰に」「何を」「どうする」。これを手紙にたとえると、宛名を書いて、中身にお願いごとを書く、という形です。
h1 {
color: red;
font-size: 32px;
}この例で、最初の h1 が(宛名)です。「どのに話しかけるか」を決めます。波カッコの中の color や font-size がプロパティ(何を)、その右の red や 32px が値(どうする)です。プロパティと値はコロンで区切り、行の終わりはセミコロンで締めます。
なぜセミコロンが要るの?
指示を一行ずつ区切る「ここで一つの指示が終わり」という合図だからです。忘れると次の指示とくっついて、AIが書いたCSSでも見た目が崩れる原因になります。まず疑うポイントの一つです。
宛名の書き方はいろいろ
宛名(セレクタ)には種類があります。全員に配るか、名札のグループに配るか、たった一人に配るか、のイメージです。
- p { ... } … pタグ全部が宛先。「段落という種類の人、全員へ」
- .note { ... } … class="note" を付けた要素が宛先。ドットで始まるのがクラス。「noteという名札の人へ」
- #header { ... } … id="header" の要素が宛先。シャープで始まるのがID。「headerさん、あなた一人へ」
AIにはこう頼む
AIが .btn { ... } と書いていたら、「btnというクラス名の付いたボタン全部に効くスタイル」だと読めます。直したい時は「.btnの文字色を白にして」と、宛名(クラス名)を指定して頼むと正確に伝わります。
AIが生成したCSSを読むとき、まず「この宛名は誰を指しているか」を探すクセをつけましょう。宛名さえ分かれば、どの見た目を変えている指示なのかがつかめます。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
CSSの h1 { color: red; } で、h1 の部分は何と呼ばれますか?
class="note" を付けた要素だけにスタイルを当てたいとき、正しいセレクタはどれ?
CSSの一行を「宛名」と「指示」という言葉を使って説明してください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。