CSSの世界へようこそ！フロントエンドの最前線でコードを書き続けていると、複雑な技術に目が行きがちですが、結局のところ、もっとも頼りになる「相棒」はいつだってクラスセレクタ（.）です。
今日は、CSSを学ぶ誰もが最初にぶつかる「どうやって特定のパーツに色を塗るの？」という疑問を、身近な例え話でスッキリ解決していきましょう。
—
1. クラスセレクタは「名札」です
CSSで特定の要素にスタイルを当てるとき、一番大切なのは「どれを指しているか」を伝えることです。
たとえば、クラスセレクタを「名札」だと想像してみてください。教室の中に30人の生徒（HTMLタグ）がいるとして、先生が「おい、そこの人！」と呼んでも誰も反応しませんよね。でも、「赤い帽子をかぶっている人！」と言えば、特定の人がピシッと手を挙げてくれます。
この「赤い帽子」が、HTMLでいうところの `class` です。
HTMLでの書き方
CSSでの書き方
CSS側では、名札を探すために「ドット（.）」という魔法の記号を使います。
/ 「.」をつけることで、「btnという名札の人を探して！」という合図になります /
.btn {
background-color: skyblue; / 空色の背景 /
padding: 10px 20px; / ボタンの余白 /
border-radius: 5px; / 角を少し丸く /
}
—
2. なぜIDじゃなくてクラスなの？
初心者の頃、「ID（#）」と「クラス（.）」の使い分けに迷うことがありますよね。IDは「マイナンバー」のように、ページ内にたった一人しか存在しないものに使うのがルールです。
対して、クラスは「ファッション」です。
街を歩いていて、「同じブランドの服を着ている人」を何人も見かけますよね？ CSSのクラスも同じで、「この見た目（スタイル）を使い回したい！」という時に使うのが正解です。
- ID（#）: ページに一つだけの特別な場所（ヘッダーやフッターなど）
- クラス（.）: ボタン、カード、見出しなど、何度も登場させるパーツ
「迷ったらクラスでOK！」――これが、現場で長く生き残るエンジニアの合言葉です。
—
3. クラス名には「意味」を持たせよう
ここが一番のつまずきポイントです。クラス名をつけるとき、つい「red-button（赤いボタン）」のような見た目の名前をつけてしまいがち。でも、もしデザイン変更でボタンが「青」になったらどうでしょう？ クラス名が「red」なのに青いボタン……混乱の始まりです。
だからこそ、「そのパーツが何のためにあるのか」という役割で名前をつけるのが、プロの流儀です。
- ❌ `red-button` （見た目）
- ⭕ `submit-button` （送信ボタンという役割）
こうしておけば、後から「やっぱり送信ボタンは緑色にしよう」となっても、名札の名前と中身が矛盾せずに済みます。
—
4. 実践！みんなで名札を使いこなそう
最後に、実際にいくつかの要素に同じクラスをつけて、スタイルを共有する例を見てみましょう。
今日のニュース
こんにちは！
お知らせ
明日は晴れです。
.card {
border: 1px solid #ccc; / 薄いグレーの枠線 /
border-radius: 8px; / 角を少し丸く /
padding: 15px; / 中の文字との距離 /
margin: 10px; / 外側の余白 /
box-shadow: 2px 2px 5px rgba(0,0,0,0.1); / ほんのり影をつける /
}
このコードを書いてブラウザで見てみると、2つの要素が同じ「card」というスタイルを共有して、まるで双子のように整列して表示されます。これがCSSの醍醐味です！
—
最後に：つまずいても大丈夫！
最初は「クラス名をどう決めたらいいか分からない」と悩むこともあるはずです。でも、安心してください。世界最高のエンジニアたちも、最初は「このボタン、なんて名前にしようかな？」と何分も頭を抱えていたんですから。
まずは「これはこういう役割のパーツだ！」と決めて、名札（クラス）をつけてみる。そこからすべてが始まります。エラーが出ても、スタイルが変わらなくても、それは「CSSと少しずつ仲良くなっている証拠」です。
焦らず、楽しみながら、自分だけの「名札」をたくさん作っていってくださいね！応援しています。
コメント