FirefoxやChromeで擬似クラス(:hoverや:activeなど)のCSSを検証する方法

FirefoxやChromeで擬似クラス(:hoverや:activeなど)のCSSを検証する方法

Posted at March 9,2015 1:55 AM
Tag:[Firefox, GoogleChrome]

FirefoxやChromeで擬似クラス(:hoverや:activeなど)のCSSを調整する方法を紹介します。

1.問題点

次のようなHTMLがあります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style>
a {
    color: #333;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    color: #00f;
}
</style>
</head>
<body>
  <a href="http://user-domain/">test</a>
</body>
</html>

このHTMLのリンクの表示についてFirefoxのFirebugで検証する場合、要素セレクタ「a」についてはプロパティや値を書き換えることでブラウザ上で表示の違いを確認することができます。

Firebugで検証

で、擬似クラス「a:hover」や「a:active」ですが、テキストにマウスをポイントするかクリックするとCSSが表示されるのですが、テキストからマウスを外すとCSSも消えてしまうため、リアルタイムにCSSを書き換えて検証することができません。

Firebugで検証

ということで、擬似クラスのCSSを検証する方法を紹介します。

2.Firefoxで擬似クラスのCSSを検証する

Firefoxで擬似クラスのCSSを検証するには「開発ツール」を利用します。

ここでは:hoverの編集方法で説明します。

検証したいページで右クリックして「要素を調査」を選択。

要素を調査

開発ツールが開くので、「インスペクタ」タブをクリックし、表示されたHTMLマークアップから検証したい要素を右クリックして「:hover」をクリック。

:hover

これでページ上のa要素がマウスをポイントせずにhoverの状態で表示され、a:hoverのCSSも強制的に表示され、編集可能になります。

:hover

3.Chromeで:hoverや:activeのCSSを検証する

検証したいページで右クリックして「要素を検証」を選択。

要素を調査

HTMLマークアップから検証したい要素を右クリックして「:hover」をクリック。

:hover

Firefoxの開発ツール同様、ページ上のa要素がマウスをポイントせずにhoverの状態で表示され、a:hoverのCSSも強制的に表示され、編集可能になります。

:hover

Chromeでは「:visited」の検証もできるようです。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)