CSSセレクタの調べ方｜Chromeデベロッパーツール（検証）でクラス・IDを確認する方法【初心者向け】

CSSでカスタマイズしてみたいけれど、

• 「どの要素を指定すればいいのかわからない…」
• 「書いたCSSが思った通りに反映されない…」

そんな経験はあると思います。

見た目では同じように見えても実際のHTML構造やクラス名はそれぞれ違うため、まずは正しいセレクタを見つけることが大切です。

そこで頼れるのが、Chromeのデベロッパーツール（DevTools）。

「Elements」タブを使えば、狙った要素のHTML構造やCSSセレクタを簡単に確認できます。

「デベロッパー」という名前に身構えてしまいがちですが、基本的なHTMLの仕組みさえわかっていれば操作はとてもシンプル。初心者でもすぐに使いこなせます。

この記事では、

という方に向けて、デベロッパーツールでCSSセレクタを調べる方法を、スクリーンショットと手順つきでわかりやすく解説します。

CSSセレクタとは？

CSSセレクタとは、「ページのどの部分をデザインするか」を指定するためのものです。CSSが反映されるかどうかは、この指定の仕方で決まります。

たとえば、HTMLには色々なタグ（<div>, <p>, <h1>など）がありますが、CSSセレクタを使うと「この特定のタグやクラス、IDに対してスタイルを変える」指示ができます。

CSSセレクタは大きく分けて、以下の3種類があります。

実際のカスタマイズでは、ほとんどの場合「クラスセレクタ」を使います。

タグセレクタとは

タグセレクタは、HTMLのタグ名を指定してスタイルを適用する方法。たとえば、すべての<p>タグ（段落）に文字色を青にしたい場合は次のように書きます。

p {
  color: blue;
}

クラスセレクタとは

HTMLのclass属性で指定された要素にだけスタイルを当てる方法。同じタグでも、特定の部分だけスタイルを変えたいときに使います。

<p class="highlight">この文章だけ強調されます。</p>

.highlight {
  background-color: yellow;
}

IDセレクタとは

HTMLのid属性で指定された1つだけの要素にスタイルを当てる方法。ページ内で一意の要素に使うことが前提です。

<p id="main-text">この段落だけスタイルが変わります。</p>

#main-text {
  font-weight: bold;
}

ChromeデベロッパーツールでCSSセレクタを調べる実践手順

デベロッパーツールを使うと、ページ上のHTML構造や適用されているCSSを簡単に確認できます。

デベロッパーツールの開き方

開く方法は２つあります。

右クリックで開く

1. Chromeで調べたいページを開く
2. 調べたい要素上で右クリック→「検証」を選択
   → 画面の右側または下部にデベロッパーツール表示されます。

ショートカットキーで開く

• Windows：Ctrl + Shift + I または F12
• Mac：Cmd + Option + I

起動後は、調べたい要素をクリックして選択します。

• 要素の選択方法

• デベロッパーツール左上の「要素選択」アイコンをクリック（青色に変化）
• ウェブページ上の調べたい要素にカーソルを合わせてクリック
  → 選択した要素がElementsタブでハイライトされます。

Elementsタブ：HTML構造を確認

Elementsタブでは、ページのHTML構造を確認できます。

ここでやることはシンプルです。

「どのclass・idが付いているか」を見つけること。

つまり、Elementsタブでclass名を見つけることが、CSSセレクタ特定の核心です。

画面にはHTMLがツリー構造で表示され、タグ名・class・idなどを確認できます。▶マークをクリックすると、親要素・子要素を展開できます。

親要素・子要素の関係を理解する

HTMLは、要素の中に別の要素が入る「入れ子構造」になっています。

たとえば、WordPressテーマ「Cocoon」の目次（toc）は次のような構造です。

<div class="toc">           ← 親要素
  <div class="toc-title">   ← 子要素：目次タイトル
  </div>
  <div class="toc-content"> ← 子要素：目次項目
    <ol>
      <li>リスト項目</li>
      <li>リスト項目</li>
    </ol>
  </div>
</div>

この場合、

• .toc が目次全体の親要素
• .toc-title や .toc-content がその中の子要素

になります。

目次全体を変えたいなら .toc
タイトルだけ変えたいなら .toc-title

このように「どこを変えたいのか」を先に決めることが、セレクタ選びのポイントです。

class / idの見方

調べ方はシンプルです。

1. ページ上で変更したい要素を右クリック → 「検証」
2. Elementsタブで選択されたHTMLを確認
3. class や id 属性をチェック

例：

<div class="example-class another-class" id="example-id">

この場合、

class="example-class another-class"
→ 2つのクラスが付いている

id="example-id"
→ ページ内で1つだけのID

という意味です。CSSでは次のように書きます。

.example-class { }
#example-id { }

Stylesタブ：適用CSSを確認

コードがずらっと並び、基本は上段がHTML、下段がCSSになっています。最初はざっくり理解できれば十分です。

CSSとスタイルの確認方法

1. Stylesタブで適用されているCSSを一覧で表示
2. プロパティの値を編集すると、ページ上でリアルタイムに見た目が変化
   • 数値を変えるだけで、その場で見た目が変わります。失敗してもページは保存されないので安心です。
3. これができるようになると、「なぜCSSが効かないのか？」も自分で判断できるようになります。

例：Cocoonの目次（toc）に適用されているCSS

Cocoonの目次を右クリック→「検証」で確認すると、親要素に class="toc" が付いていることがわかります。

そのクラスに対して、次のようなCSSが適用されています。

.toc {
   border: 1px solid #ccc;
   font-size: 0.9em;
   padding: 1em 1.6em;
   display: table;
}

→ つまり「.toc を指定すれば、この目次全体をカスタマイズできる」ということです。

おすすめの練習方法

CSSセレクタは「読むだけ」では身につきません。実際に触ってみることが一番の近道です。

1. 自分のブログで気になるパーツを右クリック→検証
2. class・idを確認する
3. Stylesタブで数値を変更して変化を見る
4. 無効化（チェックを外す）して影響範囲を確認する

→ この繰り返しで、セレクタの感覚が自然と身につきます。

まとめ｜ChromeデベロッパーツールでCSSセレクタを確認しよう

セレクタを正しく特定できれば、「なんとなくコピペする」状態から卒業できます。

CSSは怖いものではなく、確認しながら調整できるものになります。

まずは、

1. 要素を選択する
2. class・idを確認する
3. Stylesタブで実験する

この流れを繰り返してみてください。

次に読むおすすめ記事

• CSSが反映されない原因を知りたい方
  「CSSが反映されない原因は？」の記事へ

• CSSの基礎から体系的に学びたい方
  「脱コピペCSS基礎」へ

• Cocoonを本格的にカスタマイズしたい方
  Cocoonカスタマイズ（編集方法）の記事へ