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

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

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

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

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

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

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

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

この記事では、

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

Chromeデベロッパーツールを使えばCSSセレクタはすぐ見つかる

CSSを変更するときは、

1. 変更したい場所を右クリック
2. 「検証」をクリック
3. class名を確認
4. そのclassをCSSで指定

この4ステップだけ覚えれば大丈夫です。

実際の画面を見ながら一緒に確認していきましょう。

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

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

またはショートカットでも開けます。

• Windows　Ctrl + Shift + I
• Mac　Cmd + Option + I

Elementsタブでclassを探す

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

ここではclassを探せばOKです。

変更したい部分のclass名を見つけることが、一番大切なポイントです。

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

class / idの見方

Elementsタブで要素を選択すると、このようなHTMLが表示されます。ここでは 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セレクタとは？

さっき見つけたclass、これがCSSセレクタです。

CSSセレクタとは「ページのどの部分をデザインするか」を指定するためのもの。

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

よく使うセレクタは3種類

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

多くの場合「クラスセレクタ」を使います。

種類	使う頻度
class	★★★★★
タグ	★★☆☆☆
ID	★☆☆☆☆

クラスセレクタ

HTMLのclass属性が付いた要素にスタイルを適用する方法です。特定の要素だけデザインを変更したいときによく使います。

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

.highlight {
  background-color: yellow;
}

タグセレクタ

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

p {
  color: blue;
}

IDセレクタ

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

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

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

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

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

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

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

今日覚えてほしいこと

1. 右クリックして検証
2. Elementsでclassを探す
3. Stylesで試す
4. CSSへ書く

この4ステップだけできれば、ほとんどのCSSカスタマイズは始められます。

次に読むおすすめ記事

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

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

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