CSSのIDセレクター（#）とは？基本構文と実践的な使い方を解説

CSSのIDセレクターは、ページ内で一意のIDを持つHTML要素を対象にスタイルを適用するためのセレクターです。この記事では、IDセレクターの基本構文から、実際にボタン要素をカスタマイズする実践例まで、わかりやすく解説します。

IDセレクターの基本構文

IDセレクターは、ID名の先頭にハッシュ記号（#）を付けて記述します。基本的な構文は以下の通りです。

#id-name {
    property-name: value;
}

次に、同じID名を属性値として持つHTML要素を見てみましょう。

<div id="id-name"></div>

CSSのIDセレクター #id-name は、id="id-name" という属性を持つ <div> 要素に紐付けられます。つまり、スタイルシート内で #id-name に指定したスタイルプロパティは、すべてその <div> 要素に適用されます。

ここで注意したいのは、ID名の前につけるハッシュ記号（#）はCSS特有の構文だという点です。HTML側で要素にid属性としてID名を指定する際には、# 記号は不要です。

実践例：ボタンのスタイルをカスタマイズする

それでは、学んだ内容を実践的な例で試してみましょう。以下は、ブラウザのユーザーエージェントスタイルシートからデフォルトのスタイルを継承している、ごく普通のHTMLの <button> 要素です。

<button>Button</button>

デフォルトの見た目は、少し味気ないものになりがちです。そこで、#my-button というCSSのIDを作成し、スタイルプロパティを設定してデフォルトのデザインを上書きしてみます。

#my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

次に、このIDをid属性としてbutton要素に追加します。

<button id="my-button">Button</button>

これにより、角丸で統一感のあるオリジナルデザインのボタンが完成します。このように、IDセレクターを使えば特定の要素だけをピンポイントで装飾できます。

IDセレクターを使う際の注意点

IDセレクターについて最も重要なポイントは、クラスセレクターと異なり、1つのIDは1つのページ内で1つの要素にしか適用できないという点です。同じID名を複数の要素に使うことはできません。

この制約があるため、IDはクラスほど柔軟ではありませんが、その分「どの要素に必ず適用されるか」が明確になり、予測しやすいというメリットがあります。また、IDセレクターはクラスセレクターよりも詳細度（specificity）が高いため、他のスタイルを強く上書きする性質もあることには留意しておきましょう。

基本的な使い分けのルールとしては、ヘッダー、フッター、ナビゲーションバーなど、ページ内に1回しか出現しない単一の要素に対してのみIDを使用し、繰り返し使うスタイルにはクラスを使うのがおすすめです。