構造が揃った。ここから見た目へ
前回のG-04では、フォームを構成するinputやlabelといった部品を、部品レベルで見ました。これでページの構造、つまりHTML側の道具は一通り揃ったことになります。ここからは、見た目を司るCSSに入ります。CSSの最初の一歩は、色や飾りの種類ではなく、「そのスタイルを、どこに効かせるのか」という仕組みです。
このスライドのポイント
- G-01〜G-04で、HTMLによる構造の道具は一通り揃った
- ここから見た目を司るCSSに入る
- CSSの最初の一歩は「装飾の種類」ではなく「どこに効かせるか」
CSS・セレクタ・カスケードの定義
用語を定義します。CSSとは、要素の見た目、たとえば色・大きさ・配置を指定する言語です。セレクタとは、そのスタイルをどの要素に当てるかの指定で、要素名や、ドット付きのクラス名、シャープ付きのidなどで書きます。カスケードとは、複数の規則が同じ要素に当たったときに、優先順位で勝敗を決める仕組みです。基本の考え方として、後に書かれたものや、より具体的な指定が勝つ、と覚えてください。
このスライドのポイント
- CSS: 要素の見た目（色・大きさ・配置）を指定する言語
- セレクタ: 適用先の指定（要素名／.クラス名／#id）
- カスケード: 同じ要素に複数の規則が当たったときに優先順位で勝敗を決める仕組み
- 基本: 後に書いたもの・より具体的な指定が勝つ
なぜ必要か——「効かないCSS」が読めなくなる
なぜこれを知る必要があるのでしょうか。バイブコーディングで頻出する困りごとに、「CSSを直したのに見た目が変わらない」があります。多くの場合、書いた指定が消えたのではなく、別のより強い規則に負けているだけです。この仕組みを知らないと、AIに「もっと強く効かせて」と場当たり的に頼み、指定が雪だるま式に複雑になっていきます。
このスライドのポイント
- バイブコーディング頻出の「CSSを直したのに変わらない」の正体
- 多くは、指定が消えたのではなく別の規則に負けている
- 知らないと「もっと強く効かせて」と場当たり依頼になり複雑さが増す
全体像——木に当たり、階段で勝負する
全体像を見ます。CSSは、G-02で見たDOMの木に対して働きます。セレクタは、その木の中の特定の要素に「当たる」ものだとイメージしてください。そして、同じ要素に複数の規則が当たったときは、優先順位の階段で勝敗が決まります。基本の順位は、要素名の指定より、クラスの指定、さらにidの指定が強い、という向きです。この「木に当たる」と「階段で勝負する」の2つを押さえておけば、後の話はすべてその応用になります。
このスライドのポイント
- CSSはG-02で見たDOMの木に対して働く
- セレクタは、その木の中の特定の要素に「当たる」もの
- 同じ要素に複数当たると、優先順位の階段で勝敗が決まる（要素名 < クラス < id）
処理の流れ——「消えた」ではなく「負けている」
具体例で見ます。申請ボタンの色を変えたいのに、指定しても変わらない。調べてみると、別の場所にもっと具体的なクラス指定があり、そちらが勝っていた、という状況です。つまり、あなたの書いた指定は消えたのではなく、優先順位の勝負で負けていたのです。原因が「負けている」だと分かれば、対処は新しく書き足すことではなく、優先順位を整理することになります。
このスライドのポイント
- 申請ボタンの色を指定しても変わらない
- 調べると、別の場所により具体的なクラス指定があり勝っていた
- 原因が「負けている」なら、対処は書き足しではなく優先順位の整理
技術サンプル——2規則の勝負を読む
サンプルを見ます。上のCSSでは、すべてのボタンをグレーにする規則と、primaryというクラスを緑にする規則の2つが書かれています。どちらも下のボタンに当たりますが、より具体的なクラス指定が勝ち、ボタンは緑になります。読み方の要点は、2つの規則が同じ要素に当たっている点と、具体的な指定が優先される点です。AIには「このボタンに当たっているCSS規則を、優先順位つきで全部挙げてください」と聞くと、勝ち負けの全体像を確認できます。
このスライドのポイント
- 種別: code ／ 目的: 具体的な指定が勝つ様子を確かめる
混同しやすい概念——存在しない/負けている
混同しやすい2つを整理します。効かないCSSの原因には、「規則がそもそも存在しない」場合と、「規則は存在するが負けている」場合の2つがあります。前者の対処は規則を書くこと、後者の対処は優先順位を整理することで、まったく別の作業になります。原因を取り違えると、負けているだけの規則をいくら書き直しても直りません。だからこそ、直す前にどちらなのかを見分けることが大切です。
バイブコーディングでの確認点
バイブコーディングでの確認点です。「色を変えて」という指示が効かないときは、AIにまず「競合している規則はどれですか」と聞いてください。ここで注意したいのは、無闇に強い指定、たとえば!importantのような上書きで押し切らせないことです。その場は直っても、次の修正がさらに難しくなり、複雑さが積み上がっていきます。競合の中身を先に把握し、勝たせたい規則を素直に一段強くするのが、後から見て分かりやすい直し方です。
このスライドのポイント
- 「色を変えて」が効かないときは、まず「競合している規則はどれか」を聞く
- !important のような強い上書きで押し切らせない
- その場は直っても、次の修正がさらに難しくなる
まとめと次回
一問一答です。複数のCSS規則が競合したとき、勝敗を決める仕組みは何でしょうか。……答えは、カスケードです。30秒でまとめます。CSSは見た目を指定する言語、セレクタはその適用先の指定、カスケードは競合時の優先順位の仕組みでした。効かないCSSは、消えたのではなく負けている場合がある、と覚えておいてください。次回G-06では、要素の大きさの内訳、つまりボックスモデルへ進みます。関連資料は「UI改善プロンプト50」と「AI開発ワード100」です。
このスライドのポイント
- 一問一答:「複数のCSS規則が競合したとき勝敗を決める仕組みは？」→ カスケード
- 30秒まとめ: CSS=見た目の指定／セレクタ=適用先／カスケード=優先順位
- 次回G-06: ボックスモデル（要素の大きさの内訳）
- 関連資料: 「UI改善プロンプト50」「AI開発ワード100」
