Google Chromeのデベロッパー（検証）ツールでは、Webページ上の様々な要素の検証が可能です。どんなHTMLやCSSかなどを簡単に調べられます。基本的な使い方はこちらの記事を参考にご覧ください。
ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。 そこで当記事では、Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。 基本的な...
当記事では少しだけレベルを上げて、ある要素にホバーした際に適用されるスタイルを検証する方法を解説いたします。ボタンやテキストリンクなど、ホバー時に変化する要素の検証に便利です。
デベロッパーツールの「:hov」を使って検証する
デベロッパーツールを開いて、Stylesタブ内にある「:hov」をクリックすると簡単に検証できます。「Force element state」というエリアが表示され、ここで複数の擬似クラスを検証可能です。
今回の場合は、「:hover」にチェックを入れることで、その要素にホバーした状態を再現してくれます。
これでホバーしている状態のスタイル（CSS）を検証することができます。ボタンやテキストのホバーカラーを変更して検証する際などに使えますね。
デベロッパーツールで検証できる擬似クラス
先ほどの画面で確認できる通り、デベロッパーツールでは他の擬似クラスも検証できます。
ここからはデベロッパーツールで検証できるその他の擬似クラスについてご紹介いたします。実際に各擬似クラスのサンプルをデベロッパーツールで検証してみてください。
- :active
- :focus
- :focus-within
- :target
- :hover
- :visited
- :focus-visible
:active
クリック時、またはクリックし続けている間に適用されるスタイルを検証できます。
サンプル
このテキストをクリックすると赤色に変化します。
:focus
inputなどに指定される擬似クラスです。フォームなどの入力欄を選択しているときに適用されるスタイルを検証可能です。
サンプル
:focus-within
フォームなどにホバーしている状態ですが、一つの入力欄だけでなく、フォーム全体を変化させるスタイルを検証できます。
サンプル
:target
アンカーリンクなどのリンク先（ゴール地点）に適用されるスタイルを検証できます。
:hover
今回の検証に用いた通り、ボタンやテキストリンクなどにホバー時に適用されるスタイルを検証できます。
サンプル
このテキストにホバーすると赤色に変化します。
:visited
すでに訪問されたリンクなどに適用するスタイルを検証できます。訪問前後でスタイル変わります。
サンプル
:focus-visible
キー操作で選択しているときのスタイルを検証できます。下記ボタンをtabキーで選択すると赤に変わります。
サンプル
まとめ
ホバー時に変化するスタイルを検証する方法と、その他の擬似クラスについてご紹介いたしました。
ホバーに限らず、状態によってスタイルが変わる要素には擬似クラスが指定されており、デベロッパーツールでそれらを検証できることがわかりました。デベロッパーツールの使い方の幅が少しでも広がれば幸いです。
コメント