CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの「.」セレクターと「#」セレクターの違いを徹底解説！使い分けのポイント

CSSにはスタイルを適用するためのさまざまなセレクターが用意されていますが、その中でも特によく使われるのが「.」（ドット）セレクターと「#」（ハッシュ）セレクターです。この記事では、両者の違いやそれぞれの役割を、具体的なコード例を交えながらわかりやすく解説します。

「.」セレクター（クラスセレクター）とは

「.」セレクターはクラス単位でスタイルを適用するためのセレクターです。ドット演算子を使ってスタイルクラスを定義することで、同じクラスを複数のHTML要素に何度でも繰り返し適用できます。

たとえば、複数のボタンや見出しに共通のデザインをまとめて指定したい場合など、スタイルの再利用をしたい場面で非常に便利です。

「#」セレクター（IDセレクター）とは

「#」セレクターは特定の1つの要素にスタイルを適用するためのセレクターです。ハッシュ記号を使い、id属性の値が一致する要素に対してスタイルを適用します。

なお、HTML文書内で同じid値は原則として一度しか使用できないため、「#」セレクターはページ内で一意の要素（ヘッダーやフッターなど）に個別のスタイルを指定したいときに使うのが基本です。

コード例：3つのdiv要素での使い分け

次の例では、複数のdiv要素に対して「.」セレクターと「#」セレクターを使い分けています。class="blackBorder" を持つ要素には黒い枠線が、id="redDiv" を持つ要素には赤い枠線が表示されます。

<!DOCTYPE html>
<html>
<head>
    <title>Selector Example</title>
    <style>
        .blackBorder {
            border: 2px solid black;
        }
        #redDiv {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div> No Border Box </div>
    <div class="blackBorder"> Black Border Box </div>
    <div id="redDiv"> Red Border Box </div>
    <div> No Border Box </div>
    <div class="blackBorder"> Black Border Box </div>
</body>
</html>

このコードを実行すると、黒枠のボックスが2つ、赤枠のボックスが1つ表示され、枠線なしのボックスが2つ表示されます。「.」セレクターによるクラス指定は複数要素に反映される一方、「#」セレクターによるID指定は該当する1つの要素だけに反映されていることが確認できます。

「.」セレクターと「#」セレクターの違いまとめ

項目「.」セレクター「#」セレクター
種類クラスセレクターIDセレクター
適用範囲複数の要素に適用可能1つの要素のみに適用
記述方法.クラス名 { ... }#id名 { ... }
主な用途共通デザインの再利用固有要素への個別指定
優先度比較的低い比較的高い

このように、「.」セレクターは汎用的なスタイルの再利用に、「#」セレクターは特定要素への個別指定にと、それぞれ得意な用途が異なります。また、CSSの詳細度（specificity）のルール上、IDセレクターはクラスセレクターよりも優先度が高いため、スタイルが意図どおりに反映されない場合は両者の組み合わせも確認してみてください。用途に応じて正しく使い分けることで、保守性の高いCSSを書くことができます。

  1. 【CSS入門】display:noneとvisibility:hiddenの違いを徹底解説！使い分けのポイント

    CSSでは、visibilityプロパティとdisplayプロパティを使って、HTMLドキュメント内の要素を非表示にすることができます。一見すると、どちらのプロパティを使っても見た目は同じように思えるかもしれませんが、実は両者には重要な違いがあります。 display: none と visibility: hidden の基本的な違い display: none — 要素そのものがドキュメント上にレンダリングされず、領域（スペース）も一切確保されません。要素が最初から存在しなかったかのような挙動になります。 visibility: hidden — 要素はドキュメント上にレンダリングされ、

  2. CSSの疑似クラスと疑似要素の違いを徹底解説！コロンの数と使い分けのポイント

    CSSには「疑似クラス」と「疑似要素」という、名前がよく似た2つの機能があります。どちらもセレクターを拡張する仕組みですが、役割や書き方が異なります。本記事では、両者の違いをサンプルコード付きでわかりやすく解説します。 疑似クラス（Pseudo-Class）とは 疑似クラスは、:hover、:active、:last-childのように、セレクターの「状態」や「条件」を表すものです。マウスオーバー時のスタイル変更など、要素が特定の状態にあるときの見た目を制御できます。 疑似クラスはコロン1つ（:）で始まります。 CSS疑似クラスの基本構文は以下のとおりです。 :pseudo-class {