Webデザインの強い味方！ChromeデベロッパーツールでCSSセレクタを調べる方法

Webデザインやサイトカスタマイズにおいて、「要素のCSSセレクタを調べる」ことは必須スキルです。むしろ、「デベロッパーツールを使えないとCSSは書けない」と言っても過言ではありません。

セレクタ？

CSSセレクタとは、「どのHTML要素にスタイルを適用するか？」を指定するものです。この CSSセレクタを効率よく調べるために便利なのが「Chromeデベロッパーツール」 。

「デベロッパー（開発者）」という言葉を聞くと「なんだか難しそう…」と感じるかもしれませんが、実はそんなことはありません。HTML（サイトの骨組み）の構造が分かればCSSセレクタの確認も簡単にできます。

この記事では、 初心者向けに「Chromeデベロッパーツールを使ったCSSセレクタの調べ方」を分かりやすく解説します。これを読めばサイトのカスタマイズやデザイン変更がスムーズにできるようになりますよ。

About me

この記事を書いた人

はっちゃんです

• ブログ好きな40代主婦
• CocoonサイトをCSSでカスタマイズ
• 2020年1月1日ブログ開設
• ドメインパワー40
• 2023年～有料記事公開
  • →累計340件（月間約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-nameというIDがついた要素の文字を赤色にする」という意味になります。

このように、要素を特定してスタイルを適用するための「ターゲット」を決めるものが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）が含まれるという関係が分かりますね。
この 親要素と子要素の関係を理解することが、デザインカスタマイズの第一歩 になります！

toc（親要素）

CSSセレクタの確認方法

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

1. 確認したい要素の上にカーソルを合わせる
   • → ページ上で要素が青くハイライトされる
2. 該当するHTML要素をクリック
   • → 詳細がElementsタブに表示される
3. HTMLタグ内のクラス（class）やID（id）をチェック
   • → 例：htmlコピーする編集する<div class="example-class another-class" id="example-id">
   • class="example-class another-class" → 2つのクラスが適用
   • id="example-id" → IDが適用（1つのみ）

実践：Cocoonの目次（toc）のクラスを調べる

Cocoonの目次部分を選択すると、次のようなHTMLが確認できます。

<div id="toc"  class="toc tnt-number toc-center tnt-number border-element">
<!-- Content here -->
</div>

この場合、Cocoonの目次には「toc」など5つのクラスが適用されています。

• クラス（class）は複数指定できる
• ID（id）は1つの要素に対して1つのみ

どの要素にどんなクラスがつけられているのか?

このCSSクラスの見つけ方を覚えておきましょう！

クラスとは要素につける名前みたいなもので複数つけることができます。（ちなみにIDはひとつだけです）

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

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

1. HTML要素を選択した状態で、右側の Stylesタブ を開く
2. 適用されているCSSプロパティが一覧で表示 される
3. 無効化されたスタイルやメディアクエリの条件付きスタイルもチェック可能
4. 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プロパティ

Stylesタブを活用すれば、どの要素にどんなスタイルが適用されているかが一目で分かります！

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

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

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

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

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

【初心者向け】ブログのデザインをCSSでカスタマイズする手順とポイント

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

turicco.com