cssクラス名

師匠！遅くなりました！WEB講座お願いします！

師匠:

おかえりっ！待ってたよ、弟子よ🔥
今日もネオ師匠、全力でいくぞ。
さてさて、今日のWEB講座はどこからスタートしようか？

✅ 前回は「CSSの基本のレイアウト調整」だったけど、続きで

• flexbox の実践？
• grid の導入？
• それとも WordPress のTOPページ作りの具体的な構成？

進めたいテーマを教えてくれたら、それに沿ってカリキュラムを即座に組むよ💪✨
どうする？

4o

弟子:

先に前回のboxなんだけど、私から師匠への伝え方が悪かった部分があって・・・。実は師匠がはじめ

html

<div class=”container”>

<div class=”box”>A</div>

<div class=”box”>B</div>

<div class=”box”>C</div> </div>

を書いてくれ静止画のボックスを作ったじゃないですか、実はホバーがこっちの静止画の方まで反映されちゃって、boxABCと後に書いたbox123のどちらもがプニプニしてしまったんです！！

どうやらcssの.boxがいずれのboxにも働いているようなんですけど、例えばこの時のように、一つの方（今回はboxABC)は静止画で、もう一方はホバーをかけるにはどうしたらいいですか？

師匠:

なるほど！そこ、めちゃくちゃ大事なポイントだね⚡
ナイス気付き、弟子よ👏🔥

ズバリ原因は「クラス名 .box が両方のグループに使われていた」から。
CSSは同じクラス名なら全てに適用される。つまり、.box に hover のスタイルを書いたら、すべての .box に反映されるのは当然の動きなんだ。

---

🔧 解決方法：クラス名を分けよう！

たとえばこうやってグループごとにクラス名を変えるのがベスト！

html
<!-- 静止画グループ -->
<div class="container-static">
  <div class="box-static">A</div>
  <div class="box-static">B</div>
  <div class="box-static">C</div>
</div>

<!-- ホバーアニメーションありグループ -->
<div class="container-hover">
  <div class="box-hover">1</div>
  <div class="box-hover">2</div>
  <div class="box-hover">3</div>
</div>

css
.box-static {
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 10px;
}

/* ぷにぷにホバー効果つけたい方だけに適用 */
.box-hover {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
  transition: transform 0.3s ease;
}
.box-hover:hover {
  transform: scale(1.1);
}

---

これで 静止画のABCには一切ホバー効果が効かず、123だけがぷにぷに動く状態になるよ👍

---

✅ 補足

「似たデザインだけど動きが違う要素」は、

• 別クラス名にする（一番明確）
• もしくは 親要素で差をつけて限定指定（やや中級テク）

って感じで使い分けよう！

---

この件、気づけたのはレベルアップの証だよ。マジで素晴らしい✨
このまま クラス名の意味づけと整理術 にも踏み込んでいく？

どうする？次のステップいってみる？

弟子:

あ、せっかくなので引き続きで！実は自分で、もしやと思ってcssのboxに数字か何か付けたら画面崩壊したので…お願いします！

師匠:

うおお〜！その行動力、最高すぎる！！🔥
「もしや…」って思ってトライしたところがまさに 真の成長ポイント なんだよ！その感覚、絶対大事にして！

さてさて、CSSのクラス名に数字をつけたら画面が崩壊したって話、詳しく説明しよう。

---

🧠【原因】クラス名に数字から始まる名前を使うとダメ！

たとえばこんな風に書いちゃってない？

html
<div class="123box">ぷにぷに</div>

css
.123box {
  transform: scale(1.1);
}

これ、CSSでは不正なセレクタなんだ。
クラス名は数字から始めてはいけないっていうルールがあるのよ。

---

✅ 正しいクラス名のつけ方（CSSで使える書き方）

クラス名は以下のルールを守ってね：

• アルファベットで始めること
• 記号や数字を使う場合は途中からにする
• -（ハイフン）や _（アンダースコア）はOK

たとえば：

OKな例	説明
.box1	文字で始まり数字が続く
.hover-box	ハイフンで区切ってOK
.box_hovered	アンダースコアOK

NGな例：

NGな例	理由
.123box	数字で始まってNG
.!box	記号スタートでNG
.box#1	#はID指定用で混乱する

---

✨ ネオ流！実用的でわかりやすいクラス名の付け方

• .box-static → 動かない箱
• .box-hover → ホバーで動く箱
• .card-feature → 特徴カード
• .img-main → メイン画像

**クラス名はできるだけ「意味が伝わる名前」**にすると、あとでCSS見返すときに超ラクになるよ😎

---

💪 最後に実践ヒント！

今後、複数種類のボックスがある場合は：

html
<div class="box box-static">A</div>
<div class="box box-hover">1</div>

みたいに、共通部分（box）＋役割（box-static / box-hover）を分けて書くのもアリ！
これはBEM（Block Element Modifier）という書き方に近い考え方！

---

次はどうする？この勢いで クラス名の設計ルール（BEMとか） やってみる？
それとも flexやgrid に進む？

弟子:

そっかやたらと数字つければいいってもんじゃないんですね…（汗）最後のようにhtml側でこのcssの決まり適用したいって書けばいいのもわかりました！！

---

---

---