CSSのClassとIDを完全理解！違いと使い分けを解説

CSSのClassとIDを理解しよう！デザインの自由度を広げる基本テクニック

CSSを使い始めると、よく目にする「Class」と「ID」という言葉。どちらもHTML要素にスタイルを適用するための方法ですが、初心者にとってはその違いや使い分けが少し難しく感じるかもしれません。
この記事では、ClassとIDの基本的な役割や違いを分かりやすく解説し、実際に使える具体例をお見せします！これを読めば、CSSのデザインがもっと楽しくなりますよ

ClassとIDって何？

• class（クラス）
• 複数のHTML要素に同じスタイルを適用したいときに使います。
• 1つのWebページで何度でも再利用可能です。
• Css記述の際は「.」を先頭に着けます
• 記述例：

  HTMLコード

  1 2	<p class="highlight">このテキストはハイライトされています。</p> <p class="highlight">もう1つのハイライトされたテキスト。</p>

  CSSコード

  1 2 3 4

  .highlight {     color: red;     font-weight: bold; }

• id（アイディー）
• 特定の1つのHTML要素にだけスタイルを適用したいときに使います。
• 各IDは1つのページ内でユニーク（重複なし）である必要があります。
• Css記述の際は「#」を先頭に着けます
• 記述例：

  HTMLコード

  1	<p id="unique-text">このテキストは特別なスタイルです。</p>

  CSSコード

  1 2 3 4

  #unique-text {     color: blue;     font-size: 20px; }

ClassとIDの違いを簡単にまとめると

ClassとIDを使い分けるポイント

1. 再利用したいスタイルはClassを使う 例えば、同じデザインを適用するボタンや見出しなどはClassを使うのが便利です。
2. 特別な1つの要素にはIDを使う ロゴや特定のメインコンテンツなど、1ページ内で唯一のスタイルを持つ要素にはIDを使います。
3. HTMLの構造を見て適切に選ぶ 必要以上にIDを使いすぎるとコードが管理しにくくなるため、Classで対応できる場合はClassを優先するのがおすすめです。

実践例：ClassとIDを組み合わせたコード

以下の例では、ClassとIDをそれぞれ使い分けてデザインを適用しています。

まとめ

• class は再利用性が高く、複数の要素にスタイルを適用できる。
• id は特定の1つの要素にだけスタイルを適用したい場合に便利。
• 用途に応じて使い分ければ、Webページのデザインが効率的かつ分かりやすくなります！