CSSセレクタを調べる方法｜Chromeデベロッパーツール活用で初心者でも簡単！Webデザインに役立つ実践ガイド

Webデザインやサイトのカスタマイズに挑戦するとき、避けて通れないのが「CSSセレクタを調べる」作業です。実際、「デベロッパーツールを使えないとCSSは書けない」と言っても過言ではありません。

CSSセレクタとは、「どのHTML要素にスタイルを適用するか」を指定するための目印のようなもの。
そのセレクタを効率よく確認できる便利な機能が、Chromeデベロッパーツール（DevTools）です。

「デベロッパー」という言葉に難しそうな印象を持つかもしれませんが、基本的なHTML構造さえ分かれば操作はシンプル。初心者でもすぐにCSSセレクタを特定できるようになります。

この記事では、

• CSSを使ったデザインカスタマイズに挑戦したい方
• HTMLとCSSの基礎を学びながら実践したい方
• Chromeデベロッパーツールの使い方を知りたい方

に向けて、CSSセレクタをChromeデベロッパーツールで調べる方法を分かりやすく解説します。これをマスターすれば、ブログやサイトのデザイン変更がぐっと楽しく、自由にできるようになりますよ。

About meこの記事を書いた人

はるみです

ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。

• ドメインパワー : 40（2025年8月時点）
• 2023年より有料記事公開
  累計460件（月間約20件）のご購入実績
• カスタマイズを丁寧にサポート

CSSセレクタとは？初心者向けに分かりやすく解説

まず冒頭で述べたCSSセレクタとは、「どの要素にスタイルを適用するか」を指定する部分です。

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

セレクタにはいくつかの種類があります。

• タグセレクタ：タグそのものを指定する（例：p）
• クラスセレクタ：クラス名を使って指定する（例：.classname）
• IDセレクタ：ID名を使って指定する（例：#idname）

簡単な例を挙げると、以下のCSSコードを見てください。

タグセレクタ

HTMLのタグそのものを指定します（例：p）

<p>段落</p>

p {
  color: red;
}

この例では pがセレクタです。このコードは「すべての<p>タグの文字を赤色にする」意味になります。

クラスセレクタ

クラス名を使って指定します（例：.classname）

<p class="class-name">段落</p>

.class-name {  color: red;
}

この例では .class-nameがセレクタです。このコードは「class-nameクラスがついた要素の文字を赤色にする」意味になります。

IDセレクタ

ID名を使って指定します（例：#idname）

<p id="id-name">段落</p>

#id-name {  color: red;
}

この例では #id-nameがセレクタです。このコードは「id-nameIDがついた要素の文字を赤色にする」意味になります。

このように、要素を特定してスタイルを適用するための「ターゲット」を決めるものがCSSセレクタです。これらを使って、特定の要素に対してフォントや色、余白などのスタイルを設定します。

つまり、デザインを変えたいなといった場合、このCSSセレクタを調べることがまず最初に必要。

そこでデベロッパーツールが活躍するんだね！

Chromeデベロッパーツールでできること

Chromeデベロッパーツールを使用すると、簡単に以下の情報を取得できます。

HTMLの確認

ウェブページ上の特定の要素をクリックして、そのHTMLコードを確認できます。これによりページの構造が分かります。

CSSの確認

「Styles」パネルで選択した要素に適用されているCSSスタイルを確認できます。

リアルタイム編集

CSSプロパティをその場で変更して、即座にページに反映させることができます。これによりスタイルシートに入力する前にデザインの微調整が簡単に行えます。

ここではあくまでシミュレーションなので保存はされません。再読み込みするとリセットされ、適用するためにはスタイルシートに入力して確定する必要があります。

その他の活用法

• JavaScriptの実行
• エラーメッセージの確認
• レスポンシブデザインのテスト
• ソースコードのデバッグ、など

主に開発に携わる方が様々な用途に使うのですが、少しだけデザインを変えたい一般ユーザーでもHTMLとCSSの検証ができることはとても便利！初心者から上級者まで、すべてのウェブ開発者にとって必須なツールです。

【実践】ChromeデベロッパーツールでCSSセレクタを調べる方法

それでは実際にセレクタを調べてみましょう！

セレクタにはクラスやID、タグなどいくつか指定することができ、この記事ではクラスを使用します。クラスはほぼすべての要素に使われるため、クラスを把握すればまず困ることはありません。

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

ベロッパーツールを開く方法は２つあります。

1. 任意の場所を右クリックし「検証」を選択する
2. ショートカットキーを使う

任意の場所を右クリックし「検証」を選択する

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

右クリック→検証、ここは覚えてくださいね！

ショートカットキーを使う

• Google Chrome: Ctrl + Shift + I または F12
• Firefox: Ctrl + Shift + I または F12
• Mac: Cmd + Option + I

デベロッパーツールが起動したら、検証したい要素を選択します。

1. 「要素選択」ツール：デベロッパーツールの左上にあるアイコンをクリック。（クリックすると青色に変わります）
2. 要素を選択：このアイコンを選択した状態で、ウェブページ上の調査したい要素にカーソルを合わせてクリックします。
3. クリックした要素が選択されます。

デベロッパーツールが開きましたか？

ここはサイトがどういったHTMLやCSS等で構成されているかといった情報の宝庫。

デベロッパーツールの見方

Elementsタブ（HTMLの構造を確認）

デフォルトで開かれるこのタブでは、ページのHTML構造が表示されます。
ここでは、要素のタグ名・クラス・ID・その他の属性を確認できます。

Stylesタブ（適用されているCSSを確認）

選択した要素に適用されているCSSルールを確認できます。
このタブでは、上段にHTML、下段にCSSが表示されます。

コードがずらっと並び、基本は上段がHTML、下段がCSSになっています。最初は何が何だか分からなくてもざっくりと見れれば大丈夫。何度か使っているうちにだんだん慣れてきます。

HTMLの構造を理解しよう

HTMLの親要素・子要素の関係

デベロッパーツールのHTML表示では、▶（右向きの矢印）が親要素を表し、クリックすると子要素が展開されます。（展開すると▼に変化）

実際にデベロッパーツールを開いて、HTMLをクリックしてみましょう！

例：Cocoonの目次（toc）の構造

例えば、Cocoonの目次部分を調べると次のような構造になっています。

<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）が含まれる関係が分かりますね。

この 親要素と子要素の関係を理解することが、デザインカスタマイズの第一歩 になります！

CSSセレクタの確認方法（初心者向け）

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

1. 確認したい要素の上にカーソルを合わせる
   → ページ上で選んだ要素が青くハイライトされます。
2. 該当するHTML要素をクリック
   → 「Elements」タブに詳細が表示されます。
3. HTMLタグ内のクラス（class）やID（id）をチェック

例：

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

• class="example-class another-class" → 2つのクラスが適用
• id="example-id" → IDが1つだけ適用

どの要素にどんなクラスがついているかを把握することが、CSSカスタマイズの第一歩です！

CSSセレクタと適用されるCSSスタイルを確認する方法

「Stylesタブ」で適用されているCSSを確認

1. Stylesタブで適用されているCSSを確認
   • HTML要素を選択した状態で、右側の Stylesタブ を開きます。
   • 適用されているCSSプロパティが一覧で表示されます。
2. 無効化されたスタイルやメディアクエリ条件のスタイルも確認可能
3. CSSクラス名やIDをコピーする
   • 右クリック → 「コピー > セレクタをコピー」で簡単に取得できます。

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

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

• .toc → CSSセレクタ（クラス名）
• border / font-size / padding / display → 適用されているCSSプロパティ

初心者でも、この手順を覚えておけば、Cocoonだけでなく他のテーマやサイトのCSSカスタマイズもスムーズに行えます。

まとめ｜デベロッパーツールを使ったCSSセレクタの調べ方は難しくない

CSSセレクタはHTML要素のスタイルを適用するための基本的な指定方法です。タグセレクタ・クラスセレクタ・IDセレクタの違いを理解することで効率的にデザインを調整できます。

また、Chromeデベロッパーツールを活用すれば、HTML構造やCSSの適用状況を簡単に確認でき、リアルタイムで編集することもできます。デベロッパーツールの使い方をマスターすれば、Webサイトのカスタマイズやトラブルシューティングがスムーズになります。

初心者の方でも、デベロッパーツールを活用すれば直感的にCSSセレクタを調べることができるので、ぜひ実際に試してみてください！

関連して、CSSを使って自由にブログデザインをカスタマイズする全体の手順を解説しているのでご覧ください。

【初心者向け】CSSカスタマイズの基本｜WEBデザインを自由に変える方法

ブログデザインをもっと自分らしく作りたいと感じたことはありませんか？自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Casca...

turicco.com