ChromeデベロッパーツールでCSSセレクタ（クラスやID）を調べる方法

「デベロッパーツールを使えないとCSSは書けません」と断言できるほど、ウェブデザインの作業をおこなう際に「要素のCSSセレクタを調べる」ことは重要です。

セレクタ？

そう、CSSで使う要素の名前のような部分。クラスやIDがよく使われるよ！

「どこにCSSを適用するか？」指定する部分なので必須です。

このCSSセレクタを調べるために便利なのが、Chromeデベロッパーツール。

デベロッパー（開発者）という言葉を聞くと「難しそう」というイメージがありますが、それほど難しいことはありません。HTML（基礎となる骨組み）に沿ってCSSでスタイル（色や形）をつけていくという基本の仕組みが分かっていれば十分に理解できる内容です。

この記事では、デベロッパーツールを使ったCSSセレクタ（クラスやID）の調べ方を解説します。

【初心者向け】CSSを使って自由にブログデザインをカスタマイズする手順を解説

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

turicco.com

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでカスタマイズ
• 2020年1月1日ブログ開設
• ドメインパワー40
• 2023年～有料記事公開
  • →累計280件（月間約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デベロッパーツール活用／セレクタを調べるには？

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

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

デベロッパーツールを開く

Chromeブラウザを開き、調査したいページにアクセスします。デベロッパーツールを開く方法は２つあります。

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

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

確認したい要素を右クリックして「検証」をクリック。同ページの右側にコードが並んだデベロッパーツールが展開されます。

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

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

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

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

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

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

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

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

要素を選択すると、デベロッパーツールの「Elements」パネルにその要素のHTMLコードが表示されます。このパネルでは、要素のタグ名、クラス、ID、およびその他の属性が表示されます。

コードがずらっと並び、上段はHTML、下段がCSSになっています。（このレイアウトは変更可能）

最初は何が何だか分からなくてもざっくりと見れれば大丈夫。何度か使っているとそのうちだんだん慣れてきます。

HTMLの構造

表示例

上段HTML内、右向きのは親要素を表し、クリックすることでその中に入っている子要素を開閉できます。（開かれると下向き▼に変わります）

HTMLを調べる

例としてCocoonの目次の場合、一番外側の親要素のクラス名がtoc、tocを展開すると中にtoc-title（目次のタイトル）、toc-content（目次の項目）、さらにその中にolタグ（番号付きの箇条書き）などが入っているのが確認できます。親要素の中に入っているものを子要素と呼びます。

toc（親要素）

デザインをカスタマイズする際には親要素と子要素の関係も必要になるので、HTMLの構造を知ることはとても大事！

セレクタの確認方法／CSSクラスを見つけよう

選択した要素のHTMLコードを確認すると、その要素に適用されているクラスやIDが分かります。

class="クラス名1 クラス名2"のように、classを見つけるのがポイント。

例１

例えば、以下のようなHTMLコードが表示されるとします。

<div class="example-class another-class">
  <!-- Content here -->
</div>

この場合、example-classとanother-classの２つがCSSクラスです。

例２

例えば、Cocoon目次部分をクリックして検証。

上段のHTMLはこの部分（またはその近くの子要素）がフォーカスされています。近くの子要素がフォーカスされているときは少し上に戻って親要素を探すと分かりやすいです。

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

この場合、Cocoonの目次には toc を含め５個のクラスが適用されていることが分かります。

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

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

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

CSSセレクタとCSSスタイルの確認

選択した要素に適用されているCSSセレクタとCSSスタイルを確認するには、「Styles（スタイル）」パネルを使用します。デベロッパーツールの下段（または右側）に表示され、このパネルには選択した要素に適用されている全てのCSSプロパティが一覧表示されます。

「Styles」パネルを開くと、各CSSプロパティの左側にセレクタが表示されます。例えば、以下のように表示されることがあります。

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

この場合、.toc がセレクタです。

「Styles」パネルでは、要素に適用されているすべてのCSSプロパティを確認できます。プロパティは色・形・線・余白などスタイルを指定するものです。

.toc というセレクタの元に４つのプロパティがあるのが確認できますね！

この記事の復習／デベロッパーツールを使って分かったこと

はい、それでは復習です。デベロッパーツールを使って分かったことのまとめ。

HTMLを調べた結果

• Cocoonの目次のHTMLを調べると、toc を含め５個のクラスが設定されている

CSSを調べた結果

1. .tocというクラスセレクタが使われている
2. .tocというクラスセレクタで、現在以下のスタイルが設定されている

CSSセレクタが分かりました

要素に使われているクラス、設定されているCSSセレクタとスタイルが分かりました。

例として目次を使いましたが、どんな要素でも「class属性を探す」という確認方法は同様です。

ここが分かれば、あとは変更したいプロパティと値を修正・追加することでカスタマイズが可能です。デベロッパーツール上に入力してシミュレーションもできます。

.toc {
    border: 1px solid #ccc;/*枠線の太さ・実線・色*/
    font-size: .9em;/*文字の大きさ*/
    padding: 1em 1.6em;/*内側余白*/
    display: table;/*表示形式*/
}

使われているセレクタが分かれば第一歩！

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

以上、Chromeデベロッパーツールを使ったCSSセレクタ（クラスやID）の調べ方について解説しました。

Chromeデベロッパーツールを使うのは、デベロッパーという響きで感じるイメージより「思ったより難しくない」と感じませんか？

要素を選択し、HTMLコードや「Styles」パネルを確認することで必要な情報を取得できます。これにより自分の思った通りにデザインを作成することが可能になります。

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

【初心者向け】CSSを使って自由にブログデザインをカスタマイズする手順を解説

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

turicco.com