もう迷わない！CSSのclassとidの違いを徹底解説＋よく使われるclass名も紹介

HTMLとCSSで要素を装飾・スタイルする際、**classとid**の使い方は非常に重要です。それぞれの違いを理解することで、効率的にスタイルを適用でき、コードの可読性も向上します。

classは、HTML要素に共通のスタイルを適用するために使われます。複数の要素に同じclassを適用できるので、ウェブページ全体で一貫性を持たせたデザインを作る際に役立ちます。

例:

<div class="box"></div><div class="box"></div><p class="text"></p>

上記の例では、boxというclassが複数のdivタグに適用され、同じスタイルがそれぞれに適用されます。

CSSでの指定方法:

.box { width: 200px; height: 200px; background-color: lightblue;}.text { font-size: 16px; color: gray;}

classのポイント:

一方、idはユニークである必要があり、1つのHTML要素にのみ適用されます。特定の要素を一意に識別するために使われ、JavaScriptやCSSでその要素を操作・装飾したい場合に使われます。

例:

<div id="header"></div><p id="intro-text"></p>

CSSでの指定方法:

#header {    background-color: #333;    color: white;    height: 100px;}#intro-text {    font-size: 18px;    color: black;}

idのポイント:

classとidの最も大きな違いは、classは複数の要素に適用できるのに対し、idは1つの要素にしか適用できないことです。具体的な使い分けとしては、以下のように考えると良いでしょう。

classを使う場面:
- 同じスタイルを複数の要素に適用したい場合。
- 汎用的なスタイルやレイアウトを適用する際。
idを使う場面:
- ページ内で1つの特定の要素だけに特別なスタイルやスクリプトを適用したい場合。
- 特定の要素をJavaScriptで操作したい場合。

Web開発で頻繁に使用されるclass名には、一般的な名前や、特定のフレームワーク（例: Bootstrapなど）で使われるものがあります。ここでは、よく見るclass名とその役割について説明します。

container: ページ全体の幅を制限し、中央揃えにするためのdiv要素に使われます。BootstrapなどのCSSフレームワークでもよく使われます。
例:
<div class="container"> </div>
row: グリッドレイアウトで横に並ぶ要素を指定するために使われるclassです。Bootstrapのグリッドシステムでも頻繁に使用されます。
例:
<div class="row"> <div class="col">Column 1</div> <div class="col">Column 2</div></div>
col: rowの中で、各要素をカラムとして表示するためのclassです。カラムは横並びのブロック要素として扱われます。

text-center: テキストを中央揃えにするためのclassです。
例:
<p class="text-center">中央揃えのテキスト</p>
text-muted: 薄い色のテキストスタイルを適用するためのclassです。説明文や補足的な情報を表示する際に使われます。
例:
<p class="text-muted">補足説明</p>

btn: ボタンのスタイルを指定するためのclassです。ボタンの基本スタイルを提供し、その上にカスタムスタイルを追加することができます。
例:
<button class="btn">クリック</button>
btn-primary: より強調されたボタンスタイルを指定するためのclassです。特定のアクションを促すボタンに使われます。
例:
<button class="btn btn-primary">送信</button>

d-flex: 要素をフレックスボックスで表示するためのclassです。要素を横並びにするなど、柔軟なレイアウトを可能にします。
例:
<div class="d-flex"> <div>Item 1</div> <div>Item 2</div></div>
align-items-center: フレックスボックスの子要素を中央に揃えるためのclassです。
例:
<div class="d-flex align-items-center"> <div>Item 1</div> <div>Item 2</div></div>

classは複数の要素に共通のスタイルを適用するために使用され、再利用性が高いプロパティです。一方、idは一意の要素にだけ適用されるため、特定の要素に対してのみスタイルを適用したい場合や、JavaScriptで操作する際に便利です。
よく使われるclass名を理解することで、Webデザインやフレームワークの利用がスムーズになります。