id（アイディー）とclass（クラス）ってブログのデザインやプラグインでも当たり前かのように書いてますよね。
でも馴染みのない方にはなんのことかわからないと思うので、超初心者向けにidとclassの違いや使い方を解説したいと思います！
目次
idとclassについて
まず、idとclassはなんのために使うの？というところなんですが、cssでデザインをカスタマイズしたいときに使います。
例えば、ここに3匹の猫がいたとします。
猫、猫、猫
この2番目の猫にだけ青色の首輪をつけたいと思ったとき、cssでは「2番目の猫→首輪→青」という風に指定しなければなりません。
2番目はセレクタ、猫は要素、首輪はプロパティ、青は値です。
（ふーんくらいに思ってもらって大丈夫です。）
cssで実際に書くとこのようになります。
2番目の猫{
首輪:青;
}
仮に猫をp、首輪を文字色としてみます。
p:nth-child(2){
color:blue;
}
このnth-child(2)の部分、もしidやclassがついていると、簡単且つわかりやすくなるんです！
idとclassがつけられる要素
要素は上記の例でいうと「猫」の部分です。
idとclassがつけられる要素はたくさんあるのですが、よく使うのは
この辺りでしょうか。
特徴
idとclassにはそれぞれ特徴があるのですが、これだけ覚えておいてください。
idは同じ文字列のものは1つだけしかつけられない
classは同じ文字列のものを複数につけられる
先程の猫に例えると、
idはその個体そのものを表すもの…名前に似ていますね。
classは性別や種類（三毛猫など）に近いです。
猫、名前はいなり、性別はオス
猫、名前はトム、性別はオス
猫、名前はハル、性別はメス
としましょう。
htmlで上記を書くとしたら
<猫 id=”inari” class=”male”>
<猫 id=”tom” class=”male”>
<猫 id=”haru” class=”female”>
になります。
使い方
では、先程のhtmlを持ってきましょう。
<猫 id=”inari” class=”male”>
<猫 id=”tom” class=”male”>
<猫 id=”haru” class=”female”>
2番目の猫に首輪をつけたいとき、2番目の猫には「tom」というidがつけられています。
そうなるとcssは
猫#tom{
首輪:青;
}
もしくは
#tom{
首輪:青;
}
となります。
cssではidは「#」、classは「.」で表します。
オス猫に首輪をつけたい場合は、
.male{
首輪:青;
}
とするとオス猫にだけ首輪をつけられます。
実践
猫の出番はここまでです。
実際にどんなときに使えば便利かを考えてみます。
例えば、リストなんかはよく使いますよね。
1つのサイトに何個か出てくることがあると思います。
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
<ul>
<li>たちつてと</li>
<li>なにぬねの</li>
<li>はひふへほ</li>
</ul>
2つ目のulの3つ目のliの文字色を赤色にしたいとき、どうしますか？
方法はいくつかあるのですが、文字色を変えたいliにidをつけてみましょう。
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
<ul>
<li>たちつてと</li>
<li>なにぬねの</li>
<li id=”hogehoge”>はひふへほ</li>
</ul>
あとはcssを記述するだけですね。
#hogehoge{
color:red;
}
これで希望通り、2つ目のulの3つ目のliにだけ文字色を指定することができます。
あとは「投稿一覧」や「動画一覧」などのボタンです。
ボタンは全部同じデザインであることが多いので、classをつけてあげると便利です。
htmlを書き直したりできない場合も使える
WordPressだと、予めhtmlが記されている場合が多いですよね。
その場合でも多くはidやclassがつけられているので、この2つの特徴を理解していればcssが書きやすくなると思います。
