Google Chromeのデベロッパー(検証)ツールでは、Webページ上の様々な要素の検証が可能です。どんなHTMLCSSかなどを簡単に調べられます。基本的な使い方はこちらの記事を参考にご覧ください。

当記事では少しだけレベルを上げて、ある要素にホバーした際に適用されるスタイルを検証する方法を解説いたします。ボタンやテキストリンクなど、ホバー時に変化する要素の検証に便利です。

デベロッパーツールの「:hov」を使って検証する

デベロッパーツールを開いて、Stylesタブ内にある「:hov」をクリックすると簡単に検証できます。「Force element state」というエリアが表示され、ここで複数の擬似クラスを検証可能です。

デベロッパーツールの:hov設定箇所

今回の場合は、「:hover」にチェックを入れることで、その要素にホバーした状態を再現してくれます。

ホバー時に変化するスタイルの検証例

これでホバーしている状態のスタイル(CSS)を検証することができます。ボタンやテキストのホバーカラーを変更して検証する際などに使えますね。

デベロッパーツールで検証できる擬似クラス

先ほどの画面で確認できる通り、デベロッパーツールでは他の擬似クラスも検証できます。

擬似クラスとは特定の状態のときに適用されるクラスのことで、指定した状態によってスタイルを変化させたいときに使います。先ほど解説した「:hover」は、ホバーした状態に適用される擬似クラスということです。

ここからはデベロッパーツールで検証できるその他の擬似クラスについてご紹介いたします。実際に各擬似クラスのサンプルをデベロッパーツールで検証してみてください。

  • :active
  • :focus
  • :focus-within
  • :target
  • :hover
  • :visited
  • :focus-visible

:active

クリック時、またはクリックし続けている間に適用されるスタイルを検証できます。

サンプル

このテキストをクリックすると赤色に変化します。

:focus

inputなどに指定される擬似クラスです。フォームなどの入力欄を選択しているときに適用されるスタイルを検証可能です。

サンプル

お名前

:focus-within

フォームなどにホバーしている状態ですが、一つの入力欄だけでなく、フォーム全体を変化させるスタイルを検証できます。

サンプル

お名前

メール

:target

アンカーリンクなどのリンク先(ゴール地点)に適用されるスタイルを検証できます。

サンプル

アンカーリンクスタート地点

アンカーリンクゴール地点

:hover

今回の検証に用いた通り、ボタンやテキストリンクなどにホバー時に適用されるスタイルを検証できます。

サンプル

このテキストにホバーすると赤色に変化します。

:visited

すでに訪問されたリンクなどに適用するスタイルを検証できます。訪問前後でスタイル変わります。

:focus-visible

キー操作で選択しているときのスタイルを検証できます。下記ボタンをtabキーで選択すると赤に変わります。

サンプル

まとめ

ホバー時に変化するスタイルを検証する方法と、その他の擬似クラスについてご紹介いたしました。

ホバーに限らず、状態によってスタイルが変わる要素には擬似クラスが指定されており、デベロッパーツールでそれらを検証できることがわかりました。デベロッパーツールの使い方の幅が少しでも広がれば幸いです。