はじめに

HTMLとCSSでレイアウトを組む際、必ず使用するのが<div>要素。

どちらもスタイルやJavaScriptでの操作に使われますが、役割や使いどころには明確な違いがあります。
この記事では、classとidの違い・使い分け・実務での使用例を、備忘録として整理します。

①classとidの違いをざっくり比較

属性	用途	特徴
`class`	複数の要素に共通のスタイルを当てる	何回でも使える
`id`	1つの要素だけを一意に識別する	1ページに1つだけが原則

<div class="box">Box A</div>
<div class="box">Box B</div>

.box {
    background-color: lightblue;
    padding: 10px;
}

<div id="main-header">ヘッダー</div>

#main-header {
    font-size: 24px;
}