プログラミング

CSSのID、クラス、擬似クラス

最終更新： 03/03/2025
1分未満

CSSで「ID」と「クラス」、そして「擬似クラス」を使いこなすことは、ウェブデザインにおいて非常に重要です。これらの概念を理解し、正しく活用することで、スタイルシートを効果的に管理し、柔軟かつ洗練されたウェブページを作成することができます。この記事では、これらの要素をどのように作成し、利用するかを完全かつ包括的に解説します。

1. IDの作成と使用方法

IDは、HTML要素にユニークな識別子を与えるために使用されます。IDはページ内で一意である必要があり、1つのページに同じIDを持つ要素は複数存在してはいけません。

関連記事

IDの定義

HTMLでは、IDはid属性を使って指定します。例えば、次のようにdivタグにIDを付けます。

html
<div id="header">
  
div>

このID「header」は、CSSやJavaScriptからこの要素を特定するために使用されます。

CSSでのID選択

CSSでは、IDを指定するには、#を使ってそのID名を選択します。例えば、「header」というIDを持つ要素にスタイルを適用するには、次のように記述します。

css
#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

IDを使うことで、その要素に対してスタイルを適用することができます。IDは非常に具体的で優先度が高いため、他のスタイルよりも優先して適用されます。

2. クラスの作成と使用方法

クラスは、複数のHTML要素に同じスタイルを適用したい場合に使用します。クラスはIDと異なり、同じページ内で複数回使用することができます。

クラスの定義

HTMLでは、クラスはclass属性を使って指定します。例えば、複数の要素に同じクラスを適用する場合、次のように記述します。

html
<div class="card">
  
div>
<div class="card">
  
div>

ここでは「card」というクラスが2つのdivタグに適用されています。

CSSでのクラス選択

CSSでは、クラスを選択するには、.を使ってクラス名を指定します。次の例では、すべての「card」クラスに共通のスタイルを適用します。

css
.card {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  padding: 15px;
  margin: 10px;
}

クラスはページ内の複数の要素に適用できるため、IDと比べて再利用性が高いです。

3. 擬似クラスの作成と使用方法

擬似クラスは、特定の状態にある要素にスタイルを適用するために使用します。例えば、リンクがホバーされたときや、入力フィールドがフォーカスされているときなどです。

擬似クラスの例

以下のように、擬似クラスを使用して、リンクにホバーしたときのスタイルを変更することができます。

css
a:hover {
  color: red;
}

この例では、ユーザーがリンクにマウスを乗せたときに、リンクの文字色が赤に変わります。a:hoverは、リンク要素に対してホバー状態のスタイルを定義しています。

よく使う擬似クラスの例

  • :hover – 要素にマウスを重ねた時に適用されるスタイル
  • :focus – 要素がフォーカスされた時に適用されるスタイル（例えば、入力フォーム）
  • :active – 要素がアクティブな状態、つまりクリックされているときに適用されるスタイル
  • :nth-child() – 要素の位置に基づいて特定の子要素を選択するための擬似クラス
css
/* 偶数番目のリスト項目にスタイルを適用 */
li:nth-child(even) {
  background-color: #f2f2f2;
}

/* 最初のリンクにスタイルを適用 */
a:first-child {
  font-weight: bold;
}

4. 擬似要素の作成と使用方法

擬似要素は、要素自体の一部にスタイルを適用するためのもので、実際のHTMLには存在しないが、CSSで視覚的に表現したい部分を指定できます。最も一般的な擬似要素は::beforeと::afterです。

擬似要素の例

css
/* 各段落の前にアイコンを追加 */
p::before {
  content: "🔔";
  margin-right: 10px;
}

/* 各段落の後に追加テキストを表示 */
p::after {
  content: " - 続きます";
}

この例では、各段落の前にベルアイコンが表示され、後ろには「- 続きます」というテキストが追加されます。

5. IDとクラス、擬似クラスの使い分け

ID、クラス、擬似クラスにはそれぞれ用途と優先順位があります。以下は、それぞれを使い分けるための基本的なガイドラインです。

  • ID: ページ内で一意でなければならない要素に使用します（例：ヘッダー、フッター、特定のセクション）。
  • クラス: 複数の要素に同じスタイルを適用したいときに使用します（例：ボタン、カード、リストアイテム）。
  • 擬似クラス: 要素の状態に応じてスタイルを変更したいときに使用します（例：リンクのホバー、フォームの入力状態）。
  • 擬似要素: 要素の前後に追加コンテンツを挿入したいときに使用します（例：リストの前にアイコンを追加する場合など）。

まとめ

ID、クラス、擬似クラスは、CSSを使用してウェブページをスタイリングする際に非常に重要な役割を果たします。それぞれの特性を理解し、適切に使い分けることで、より効率的で柔軟なスタイルシートを作成することができます。

最終更新： 03/03/2025
1分未満
Back to top button