CSS classとidの使い分け

公開: 2015-05-26 02:50
更新: 2016-04-29 06:03

CSSでclassとidの違いというか、
使い方がいまいちピンと来ない人がいるようなので簡単にまとめてみます。





1.idは固有値みたいなもの、classは属性みたいもの


「つまり...どういうことだってばよ...」


案ずることなかれ。
あっきぃがこれから分かりやすく人間を例に説明してみます。


まずあなたは自分が神さまになったつもりで考えて下さい。
神さまのお仕事の1つとして人間の創生があります。作ってみましょう。


まずは器を用意します。今回は初めてなので3人分用意します。

<div></div>
<div></div>
<div></div>

空っぽです。何もないです。無です。


次に無である場所に、

人間(human)であるということを示す属性を追加します。

<div class="human"></div>
<div class="human"></div>
<div class="human"></div>
.human { width: 50px; height: 50px; border: 1px solid #000; }

無個性の人間が3人誕生しました。

四角くてかわいいですね。


次に固有である名前をつけてあげましょう。

左から、太郎(taro)、次郎(jiro)、ジェロニモ(geronimo)とします。

<div class="human" id="taro"></div>
<div class="human" id="jiro"></div>
<div class="human" id="geronimo"></div>

太郎は背が高く、次郎はまだ幼く、ジェロニモは強靭だったりします。

#taro { height: 70px; }
#jiro { width: 30px; height: 20px; }
#geronimo { width: 100px; height: 100px; background: #666; }

これが個性、固有値というものです。この時はidでつけます。





2.固有値なのか、属性なのか

先ほどのジェロニモは強そうでした。

するとこんなところにもう1人いました。

名前はベロニカ(beronica)です。

なんだかジェロニモに似ていて強そうですね。

#beronica { width: 60px; height: 50px; background: #666; }

体の大きさは違えど、体の色がジェロニモと同じ#666です。

どうしたもんかと2人に話を聞いてみると、2人は戦士(soldier)でした。そして戦士は必ず銀色の鎧を着るとのこと。


おっと、体の色が銀色(#666)なのはジェロニモの固有値ではなく戦士の属性値だったのですね。

ならばコードはこう修正しなければなりません。

<div class="human" id="taro"></div>
<div class="human" id="jiro"></div>
<div class="human soldier" id="geronimo"></div>
<div class="human soldier" id="beronica"></div>
.human { width: 50px; height: 50px; border: 1px solid #000; }
.soldier { background: #666; }

#taro { height: 70px; }
#jiro { width: 30px; height: 20px; }
#geronimo { width: 100px; height: 100px; }
#beronica { width: 60px; height: 50px; }

もし「踊り子」の属性値があれば「.dancer」ってなclassを、

「魔法使い」の属性値があれば「.witch」ってなclassを用意します。ゲームを作っているみたいで楽しいですね。





3.idのさらなる絞り込み

ここまでくれば、classとidの違いはかなり具体的に理解出来たと思います。

おや?向こうから何かが近づいて来ます。

どうやら犬みたいですね。

そして、名前は...あ、まずい...太郎(taro)だ。

<div class="human" id="taro"></div>
<div class="dog" id="taro"></div>
.human { width: 50px; height: 50px; border: 1px solid #000; }
.dog { width: 20px; height: 10px; border: 2px solid #5a453f; }

名前がかぶってしまいました。ここでidをさらに絞り込む必要があります。

そのまえに、「idは唯一無二だ!」という教えがありますが、昨今のブラウザであれば別にかぶって問題ないです。

この場合だと、かぶったまま、このように絞り込むことが出来ますね。

.human { width: 50px; height: 50px; border: 1px solid #000; }
.dog { width: 20px; height: 10px; border: 2px solid #5a453f; }

.human#taro { height: 70px; }
.dog#taro { width: 30px; height: 10px; }

問題なく表示されます。

ただJavaScriptのgetElementByIdなんかは複数ある場合うまく扱えないのでこの方法は避けた方が無難でしょう。(あっきぃは気にせず使うことはある。jQueryなら複数でも動くし。)


そこでidに属性を付属させ、さらに絞り込むようにするのが可読性を含め良いかと思います。

<div class="human" id="human-taro"></div>
<div class="dog" id="dog-taro"></div>
.human { width: 50px; height: 50px; border: 1px solid #000; }
.dog { width: 20px; height: 10px; border: 2px solid #5a453f; }

#human-taro { height: 70px; }
#dog-taro { width: 30px; height: 10px; }

このようにハイフン「-」で繋いだり(チェインケース)、キャメルケースが多いです。

(あっきぃはこんな感じでキャメルケースが好き。)

<div class="human" id="humanTaro"></div>
<div class="dog" id="dogTaro"></div>

長い名前。例えば、太郎が鈴木太郎だった場合を考えて、
属性と名前を分けるためにハイフンとキャメルを組み合わせても分かりやすいカモですね。

<div class="human" id="human-suzukiTaro"></div>




4.結局好きなように書けばいいと思う

まぁ色々言ったけども、好きなように書けばいいと思います。

「CSS 命名規則」とかで調べれば、なんか偉い人が考えた規則とかあるのでそれに則るのも良いでしょう。

どの方法にもメリット、デメリットがあります。会社とか入ったらその会社の方針なんかもあったりします。

個人でやる分には好きなように、論理的に考え理由を持ってこの方法が良いと思える方法で書けばいいと思いまする。

(その方法のメリットデメリットについて友人と語らうのも、ブログに意見としてまとめてみるのも良いでしょう。)



ではでは。



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。