はじめに

プログラミング学習を始めた当初、idとclassってどういう使い分けをしてるんだろうって思っていました。
同じように思っている初学者がいると思うので、簡単に説明していきます。

id属性

同じwebページ内で一度しか同じ値を使えません。
その代わり、class属性に優先してスタイルをつけることができます。
CSSに書く際は、頭に「#」を付けて記述します。

HTML

<div id="id名">hello</div>

css

# id名{
   color: red;
}

・同じ値は一度しか使えないので、これはダメ！

HTML

<div id="hello">hello</div>
<div id="hello">こんにちは</div>

idと違い、同じwebページ内で何度も同じ値を使うことができます。
CSSに書く際は、頭に「.」を付けて記述します。

html

<div class="class名">hello</div>

css

.class名{
   color: red;
}

・同じ値を何度でも使えるので、これはオッケー！

HTML

<div class="hello">hello</div>
<div class="hello">HELLO</div>
<div class="hello">こんにちは</div>

基本的にはclass属性を使い、ピンポイントでスタイルを適用したいようなときがあればid属性を使えば良いでしょう。