HTMLのタグに記述する「id」と「class」は使い分けてる？使い方の違いに注意！

id属性とは

id属性の記述は下記のようになります。

            

                
<section id="about">
                
  ・
                
  ・
                
</section>
            
        

今回は「about」というid名を付けています。

            

                
#about {
                
  ・
                
  ・
                
}
            
        

CSSでは「about」の前に「#」を付けて「#about」と記述します。

例では「section」タグにidを追加しているんですが、ココがポイントですね。ぶっちゃけid属性は「p」でも「span」でも何にでも追加する事はできます。

ただ、「1ページに同じid名を複数記述しちゃダメ」というルールがあるんです。

最近ではデザインが適応されないという事はないのかな？僕がコーディングし始めた頃は同じid名が複数あればデザイン崩れが起きてましたね。

なので1ページにひとつしか設置しない「header」や「footer」、各項目を示す「section」などに使う事が多いです。ザックリ言うとひとつの大きな項目に付けます。

そしてid属性にはもうひとつ使える機能があります。それはアンカー（目印）となってページ内リンクが設置できる。

リンクというのは「a」タグで指定しますが、別ページにリンクするだけではなく同じページの指定した場所にリンクする事ができます。

            

                
<a src="#about">ホームページについて</a>
            
        

「about」としたsection項目にリンクしたい時は上記のように記述してやればページ内でその項目へ移動してくれます。

class属性とは

class属性の記述は下記のようになります。

            

                
<div class="txt">
                
  ・
                
  ・
                
</div>
            
        

今度は「txt」というclass名を付けています。

            

                
.txt {
                
  ・
                
  ・
                
}
            
        

CSSでは「txt」の前に「.」を付けて「.txt」と記述します。

ここまでの部分はid属性と同じ使い方です。記述の仕方が「#」から「.」に変わるだけです。

基本的にデザインを指定する場合はclass属性でおこなえば問題ないです。class属性なら1ページに同じclass名を何度使ってもオッケーです。

なのでclass名も共通で使う「txt」であったり「image」として複数個所に同じデザインを適応させるように指定したりします。

「id」と「class」の使い分け

id属性とclass属性については前項までの内容で大体の違いは想像できたかな～と思います。

おさらいすると「同じid名が1ページに重複しちゃダメ」「1ページに複数のclass名を使用してもオッケー」です。

初心者の方で使い分けが面倒ならすべて「class」の指定でも良いです（笑）。←僕もはじめは「id」無視してました（笑）。

ついでにもうひとつ「id」と「class」の性質を紹介すると、CSSの指定は「id」を優先するという事です。

CSSは同じ要素に対してのデザインが2回記述されている場合、より下に記述されている指定が優先されます。

ですが同じタグに「id」と「class」が指定されている時、「class」のデザインの方が下に記述されていても「id」のデザインが優先されます。

            

                
#sample {
                
  font-size: 15px
                
}
                
 
                
.sample {
                
  font-size: 12px
                
}
            
        

id・classともに「sample」という値が設定されている場合、上記の記述では「id」で指定している「15px」が適応されます。上に書かれている「#sample」が下と同じ「.sample」であったなら「12px」が適応されるんです。

知らないとデザインが反映されずにモヤモヤするトコなので覚えて帰ってください（笑）。