CSS idとclass

IDとCLASSは、HTML要素にスタイルを適用するためのセレクタです。

ID

IDはページ内で一度だけ使用されるべきで、特定の要素に固有のスタイルを適用するのに適しています。

CSS内でハッシュ記号(#)に続けてID名で表現されます。

サンプルコード

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

#header {
  background-color: blue;
  color: white;
  text-align: center;
}

CLASS

複数のHTML要素に共通のスタイルを適用するために使用されます。

CLASSはページ内で複数回使用でき、同じ要素に複数のCLASSを適用することもできます。

CLASSセレクタは、CSS内でピリオド(.)に続けてCLASS名で表現されます。

サンプルコード

<p class="highlight">これはハイライトされたテキストです。</p>
<p>これはハイライトされていないテキストです。</p>
<p class="highlight">これもハイライトされたテキストです。</p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

CSSの仕様では、セレクタは識別子(identifier)で始まらなければならず、識別子はアルファベット、ハイフン（-）、アンダースコア（_）のいずれかで始める必要があります。

数字で始まるセレクタは、CSSの構文ルールに違反するため、正しく解釈されずに無視されます。

数字で始まるクラス名やIDが必要な場合は、接頭辞をつけることで解決できます。

例えば、1-columnというクラス名が必要な場合、col-1-columnのようにしてください。

使い分け

初心者の方は、まずはIDセレクタをページ内で一度だけ表示される要素に対して使用し、CLASSセレクタを再利用可能なスタイルに使用するように習慣づけることが大切です。