【初心者用】よくわかるdivについているidとclassの意味と使い方

2019年8月7日2021年10月8日

記事の目次

1. idとclassは何のためにある？
2. idとは？
• 2-1.htmlでのidの書き方
　
• 2-2.cssでのidの書き方
　
• 2-3.idは同じページ内に一つだけ
　
• 2-4.idはページ内リンクを作成するときにも使う
3. classとは？
• 3-1.htmlでのclassの書き方
　
• 3-2.cssでのclassの書き方
　
• 3-3.idは同じページ複数書いてＯＫ
　
• 3-4.idとclassは同じタグに付けてＯＫ
4. idとclassの違いは？
　
• 4-1.cssの優先順位の違い
　　
• 4-2.javascriptを使う時はidの方が処理が早い
5. idとclass、結局どっちを使えはいいの？
• 5-1.理由１－idは優先度の高さが邪魔をする
　
• 5-2.理由２－共通のcssを適用するときに便利
6. divタグにclassやidを使われているのはなぜ？
7. 学習のまとめ

 idとclassについて学ぶ前に

idとclassは何のためにある？

idとclassの特徴と違いを理解する前に、そもそもidとclassがhtmlとcssでどんな役割を持っているかを学習していこう。

idとclassは「特定の要素にだけcssを適用したい時」に使用する。では、どういったときにidとclassと使う必要があるのか見てみよう。

　

左のコードの中で１・２番目のp要素だけテキストを赤色にしたいとする。

　

その時のcssのコードはどうなるだろうか？

　

cssテンプレートコード

div {
  color : red ; 
}

p {
  color :red ;&
}
     

これでは不正解だ。もしこのようにdivとpをセレクタ(その要素の？の部分）にした場合、すべてのテキストが赤色に変わってしまうのだ。

こんな時にidとclassを使用する。（今回の例はclass）

赤色にしたいp要素に対して「class="red"」という属性をつけていく。

　

cssテンプレートコード

.red {
   color : red ; 
}
     

そしてそのclass名をセレクタに指定することで「red」というclass名のついたp要素だけテキストを赤色にできるのである。

このように特定の要素だけ（例では１・２番目のp要素）にたいしてcssを適用させたいという場合に、id名、class名を付けることで、それをセレクタとして扱うことができるようになる。

つまりidとclassは「特定の要素をセレクタで使用するために付ける名前」という役割になるのだ。

少し回りくどい言い方になってしまったので、まだ理解が難しいかもしれないが、記事を読み進めていく中で理解が深まっていくようになっているので、安心してほしい。

idとは？

classとの違いに触れる前に、まずそれぞれの特徴を理解しよう。

idとはhtmlの属性である。みなさん属性とはなにか覚えているだろうか？

htmlでのidの書き方

htmlテンプレートコード

＜！－－正しい例－－＞
<div id="contain">～</div>
<div id="f-50">～</div>


＜！－－間違っている例－－＞
<div id="50-mgm">～</div>
<div id="_box">～</div>
     

ほかの属性と同じようにid属性も
＜タグ名 id="id名"＞と書く。

名前の付け方にもルールがあり、

• 半角英数字を使う(大文字ＯＫ＞
• －（ハイフン）と＿（アンダーバー）の記号はＯＫ
• 先頭が数字や記号から始まるのはＮＧ

となっている。

左に正しい例と間違っている例を紹介しよう。id名のルールに反しているとうまくcssが機能しないので注意すること。

cssでのidの書き方

id名を付けた要素をcssのセレクタにするときは
＃（シャープ）＋id名
というようにセレクタに記述する。
プロパティや値は変わらない。

idは同じページ内に１つだけ

「１つのページに」とは「同じhtmlファイルに」という意味である。例えばトップページを表示しているindex.htmlにid="mgn-10"idが複数存在しているのは不可である。

しかし、トップページのindex.htmlにid="mgn-10"が１つ、サービス紹介のページを表示するservice.htmlにid="mgn-10"が１つと、同じサイトでも違いページなら可能だ。

idはページ内リンクを作成するときにも使う

ここはおまけ的な解説なので、興味がなければ読み飛ばしても構わない。実はidは同じページ内のある個所まで移動させる「ページ内リンク」を作成するときにも活用している。

htmlテンプレートコード

<div
id="top">...</div>
<a
href="#top">トップへ戻る</a>
    

このようにid名を付けた要素をリンク先に指定することで、ページ内リンクを作成できるのもid属性の特徴だ。

classとは？

classもidと同じくhtmlの属性だ。idと似ている部分は多いが、ちょっとした違いがあるのでよく読んでおこう。

htmlでのclassの書き方

id属性と同じ形式だ。

＜タグ名 class="class名"＞

というように書く。

名前の付け方のルールはidと同じで

• 半角英数字
• －（ハイフン）と＿（アンダーバー）の記号はＯＫ
• 先頭が数字や記号から始まるのはＯＫ

となっている。

cssでのclass名の書き方

cssでclass名をセレクタに指定する場合は
．（ドット）＋class名
というように書く。

こちらもプロパティや値の書き方に変化はない。

classは同じページに複数書いてＯＫ

id属性との大きな違いの１つがこれだ。idは同じページに同じid名の要素が複数存在するのは不可能だ。

しかし、classはその制限がない。かといって複数ないといけない、ということはなく、classは１つでも複数でもどちらでも構わない。

idとclassは同じタグに付けてＯＫ

<div>
  <p
class="txt">idは1つ</p>
  <p
class="txt">classは複数</p>
  <p
class="txt">両方つけてもＯＫ</p>
</div>
    

<div>
  <p
class="txt">idは1つ</p>
  <p
class="txt">classは複数</p>
  <p
class="para"
class="txt">両方つけてもＯＫ</p>
</div>
    

idとclassの違いは？

さて、idとclassの概要がわかったと思うので、それぞれどのような違いがあるのかを解説していこう。

違いの１つ目は何度も説明しているが、単純に「idは１つまで、classは複数ＯＫ」という点だ。実はそれ以外に、もう２つ違う点がある。

cssの優先順位の違い

cssには優先順位という概念がある。

これは「同じ要素に対して別々のcssが適用されたとき、どちらを優先して反映させるか？」という順位付けの概念だ。実際の例をみてみよう。

<div>
  <p
class="red">これは赤色</p>
  <p
class="red">これは赤色</p>
  <p
id="blue"class="red">これは青色！</p>
</div>
    

.red {
  color : red;
}
.blue{
  color : blue;
}
    

正解は青色だ。同じ要素に対して別々のcssが書いてある場合、セレクタによって優先度が決まるのだ。

idがセレクタの場合、classよりも優先度が高く「id＞class」となるため、color:blue;が優先されて適用されている。

このようにidとclassではcssの優先度が違うということを覚えておこう。

javascriptと使う時はidのほうが処理が早い

ここは読み流す程度で頭の隅に置いておいて構わない。

あなたがweb制作を今後勉強していくと、いくつかのwebサイトにアニメーション（動き）を付けるためにJavasprictやjQueryといったものを勉強することになるだろう。

そのjavascriptでもcssのセレクタ同様「どの要素に対して動きを付けるか？」というのを記述する箇所がある。

そのセレクタに指定する要素がidだとコンピューターの処理速度がとても速くなるのだ。

idとclass、結局どっちを使えばいいの？

さて、いよいよみなさんが１番疑問に思っている「idとclassの基本と違いは分かったが、結局どっちを使えばいいのか？」という点に触れていこう。

結論から言えば「とりあえずclassを使う」だ。理由は２つある。

理由１－idは優先度の高さが邪魔をする

先ほどidはclassよりcssの優先度が高いことを説明したが、idをたくさん使用してしまうとidをつけた要素のcssの優先度が高くなってしまい、idをつけた要素に対してcssを適用するときに反映しにくくなってしまう。

今の時点ではイメージしにくいだろうが、webサイト制作を実際にやっていくとこの点のの大変さがわかるはずだ。

理由２－共通のcssを適用するときに便利

<p id="01">迷ったらclassを使う</p>
<p id="02">迷ったらclassを使う</p>
     

#id01{
  background-color:#5fa3d6;
  color:white;
  font-size:36px;
}

#id02{
   background-color:#5fa3d6;
   color:white;
   font-size:36px;
}

<p class="class-only">迷ったらclassを使う</p>
<p class="class-only">迷ったらclassを使う</p>
     

.class-only{
  background-color:#5fa3d6;
  color:white;
  font-size:36px;
}

以上の２つの理由から「とりあえずclass名」を使っておこう。「では、idはいつ使うのだろう？」という疑問が生まれるが、web制作を始めたばかりの頃は深く考えないで構わない。事実、プロのweb制作の現場でもclassとidが使われる割合は「9：1」くらいである。まずはclassを使いこなすことを考えよう。

divタグにclassやidが使われているのはなぜ？

htmlとcssを勉強したばかりだと、よく特にdivタグにidとclassがついているのをみかけると思う。

これはなぜだろうか？それはdivがページのレイアウトを構成するために頻繁に使われるタグだからだ。

例えば以下のように、デフォルトでは縦並びになっているものを横並びのレイアウトにしたい時を例にしてみよう。

横並びにするには「左に配置したいhtml」と「右に配置したいhtml」を分けてあげなければならない。

そんな時にdivタグを使用して以下のようにhtmlをグループ分けする。

<div>
  <span>MOVIE撮影</span>
  <h3><a href="#"><img src="img-plan-movie.png" alt="movie撮影"></a></h3>
  <p class="sentence">音楽ライヴ・コンサートや講演会などで動画撮影を～～</p>
</div>


<div>
  <span>PHOTO撮影</span>
  <h3><a href="#"><img src="img-plan-photo.png" alt="photo撮影"></a></h3>
  <p class="sentence">通常の写真撮影プランです。特殊デザイン加工を～～</p>
</div>
 

このようにレイアウトをするためのグループ分けはwebページを作るうえで頻繁に行い、その都度たくさんのdivがでてくる。

そこで、たくさんのdivがある中でdivをセレクタに指定し

div{
     width : 300px;
  }
 

というcssの書き方をすれば、すべてのdivの横幅が300ｐｘになってしまう。そのため

<div class="plan">
  <span>MOVIE撮影</span>
  <h3><a href="#"><img src="img-plan-movie.png" alt="movie撮影"></a></h3>
  <p class="sentence">音楽ライヴ・コンサートや講演会などで動画撮影を～～</p>
</div>


<div class="plan">
  <span>PHOTO撮影</span>
  <h3><a href="#"><img src="img-plan-photo.png" alt="photo撮影"></a></h3>
  <p class="sentence">通常の写真撮影プランです。特殊デザイン加工を～～</p>
</div>
 

divにclass名をつけてグループごとの管理することでcssを書きやすくする。こういった理由からdivにclass名やid名がついていることが多いのだ。

この部分は今は理解が難しいかもしれないがhtmlとcssでレイアウトを組む練習をしていく中で「ああこういうことか！」とわかるタイミングが来るので安心してほしい。

学習のまとめ

htmlの初心者がつまづくidとclassについて理解できただろうか？もう一通り本記事を読み返し、理解が深まったらあとは手を動かしながら覚えていくことが１番だろう。

最後に、今回学習した内容の要点をまとめたので自分の理解と照らし合わせてみよう。

• idとclassは特定の要素にcssを適用するための名前付けの役割
• idはページに１つ、classはページに１つでも複数でもＯＫ
• 同じ要素にidとclassを書いてもＯＫ
• 同じcssが書かれていた場合、idとclassではidが優先される
• とりあえずclass名を使っておけばＯＫ
• divにidやclassが多いのはdivがレイアウトを組むのに欠かせないタグだから

以上だ。