CSS ID セレクター

JPKODA 編集部 May 6, 2026

ID セレクターは CSS における強力なツールであり、ウェブページ上の特定の HTML 要素に対して唯一無二（ユニーク）なスタイルを適用することを可能にします。

複数の要素に適用できるクラスセレクターとは異なり、ID セレクターは一度に一つの要素のみをターゲットにします。そのため、ウェブサイトのヘッダーやフッター、あるいは特定の特別なセクションなど、真に固有な要素のスタイルを設定するのに最適です。他のセレクタータイプと組み合わせることで、CSS 全体の構造化と可読性の向上に寄与します。

1. ID セレクターを理解する

ID セレクターは、ハッシュ記号 (#) の後に ID 名を続けて記述することで、特定の HTML 要素をターゲットにします。この ID 名は、一つの HTML ドキュメント内で必ず一意（ユニーク）でなければなりません。この一意性こそが、ID セレクターとクラスセレクターを区別する決定的な違いです。

1.1 構文と使用法

ID セレクターの基本構文は以下の通りです。

#idName {
  property: value;
  /* その他の CSS 宣言 */
}

実際の使用例を見てみましょう。

<div id="main-header">
  <h1>マイウェブサイトへようこそ</h1>
</div>

#main-header {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

この例では、CSS ルールは ID が main-header である div 要素にのみ適用されます。

2. 優先順位 (Specificity)

優先順位（詳細度）は CSS における重要な概念であり、複数のルールが同じ要素をターゲットにしている場合に、どのルールを適用するかを決定します。

ID セレクターの優先順位は、クラスセレクターや要素セレクターよりも高くなります。 つまり、ある要素の同じプロパティに対して ID セレクターとクラスセレクターの両方が定義されている場合、ID セレクターで定義されたルールが優先されます。

優先順位を示す例：

<div id="unique-element" class="my-class">
  これはユニークな要素です。
</div>

#unique-element {
  color: blue; /* ID セレクター */
}

.my-class {
  color: red; /* クラスセレクター */
}

div {
  color: green; /* 要素セレクター */
}

この場合、div 内のテキストは青色になります。なぜなら、ID セレクター #unique-element の優先順位が、クラスセレクター .my-class や要素セレクター div よりも高いためです。

3. ID セレクターを使用すべき場面

ID セレクターは、ページ内で一度しか登場しない要素のスタイル設定に最適です。例えば：

メインヘッダー (Main Header) やフッター (Footer)
プライマリナビゲーションバー (Primary Navigation Bar)
固有のバナー (Banner) やプロモーションセクション
特定のフォームや検索バー

これらの要素に ID セレクターを使用することで、スタイルが意図通りに、かつ一貫して適用されることを保証できます。

4. ID セレクターを避けるべき場面

ID セレクターは有用ですが、多用は禁物です。以下のような場合は、代替のセレクター（クラスセレクターなど）を検討してください。

同じスタイルを複数の要素に適用する場合： クラスセレクターを使用してください。
基本的な HTML 要素のスタイルを設定する場合： 要素セレクターやコンビネーター（結合子）が適しています。
再利用可能なコンポーネントを作成する場合： クラスは再利用を前提としていますが、ID は一意である必要があるため、同一ページ内で使い回すコンポーネントには向きません。

5. 実戦例とデモンストレーション

様々なシナリオでの ID セレクターの活用方法を探ってみましょう。

5.1 示例 1：固有のナビゲーションバーのスタイル設定

サイト内の他のナビゲーション要素とは異なるスタイルを適用したいメインナビゲーションの例です。

<nav id="main-nav">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">アバウト</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

#main-nav {
  background-color: #333;
  color: white;
  padding: 10px;
}

#main-nav ul {
  list-style-type: none; /* リスト項目のマーカーを削除 */
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#main-nav li {
  float: left; /* リスト項目を横並びにする */
}

#main-nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#main-nav li a:hover {
  background-color: #ddd;
  color: black;
}

この例では、ID セレクター #main-nav を使用して特定のナビゲーションバーをターゲットにし、これらのスタイルがこの要素にのみ限定して適用されるようにしています。

5.2 示例 2：特定のフォームのスタイル設定

お問い合わせフォームなど、特定のフォームに固有のデザインを適用する場合です。

<form id="contact-form">
  <label for="name">お名前：</label><br>
  <input type="text" id="name" name="name"><br><br>
    
  <label for="email">メールアドレス：</label><br>
  <input type="email" id="email" name="email"><br><br>
    
  <label for="message">メッセージ：</label><br>
  <textarea id="message" name="message"></textarea><br><br>
    
  <input type="submit" value="送信">
</form>

#contact-form {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
}

#contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* パディングとボーダーを幅に含め、レイアウト崩れを防止 */
}

#contact-form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

#contact-form input[type="submit"]:hover {
  background-color: #3e8e41;
}

ここでは #contact-form を使用してフォーム全体のレイアウトを整え、さらに属性セレクターと組み合わせて内部の各入力要素を細かく制御しています。

5.3 示例 3：おすすめセクションのハイライト

ホームページ上で特定のセクションを際立たせたい場合です。

<section id="featured-section">
  <h2>おすすめ記事</h2>
  <p>こちらは今月最も読まれた注目のピックアップ記事です。</p>
  <a href="#">続きを読む</a>
</section>

#featured-section {
  background-color: #e9ecef;
  padding: 20px;
  border: 1px solid #dee2e6;
  text-align: center;
}

#featured-section h2 {
  color: #007bff;
}

#featured-section a {
  color: #007bff;
  text-decoration: none;
}

#featured-section a:hover {
  text-decoration: underline;
}

ID セレクター #featured-section を用いることで、他のセクションと視覚的に差別化し、ユーザーの注目を集めるデザインを実現しています。