森のプログラミング練習ブログ

htmlやcssの練習したコードを投稿するブログです。

「id」と「class」結局どちらを使用する?

参考サイト

webliker.info

自分なりにサイトの文章をまとめてみました。

 

結論:とりあえず「class」を使用する

 

理由:「id」は優先度の高さが邪魔をする

‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐-------------------------------------------------------------

1.「id」「class」よりCSSの優先度が高い

 

2.「id」を沢山使用すると、「id」を付けた要素のCSSの要素が高くなり、「id」を付けた要素に対し、CSSを適用する時に反映しにくくなる

 

↑実際にコードを組んで体験しないとイメージがしにくい

--------------------------------------------------------------------------------------------------

html

 <p id="01">←迷う場合classを使う</p>

 <p id="02">←迷う場合classを使う</p>

 

↑同じhtml内にidを使用すると不便になる

 

css

#id01{

    background-color:#~;

    color:white;

    font-size: 36px;

}

 

#id02{

    background-color:#~;

    color:white;

    font-size: 36px;

}

 

↑2回分のcssコードを入力しないといけない(その分作業量が増える

-----------------------------------------------------------------------------

↓もしもidではなくclassだったらcssもう一度書く必要が無い

 

html

<p class="class-only">←迷う場合classを使う</p>

<p class="class-only">←迷う場合classを使う</p>

 

css

.class-only{

    background-color:#~;

    color:white;

    font-size: 36px;

}

 

↑classは1つだけで大丈夫

---------------------------------------------------------------------------------

まとめ

classidが使われる割合は「9 : 1」まずはclassを使いこなす