Chromeの「要素の検証」でマウスオーバー時の状態(hover)を確認する方法

1b3d8227ea287d41a461fabcd436f876.jpg

年末年始に遊ぶ用に iPhoto iPadで遊べる名作ゲーム 428 を購入 そふぁねブログ 7
Google Chromeにある「要素の検証」という機能。HTMLとCSSが読めるので、ブログのデザインを書いたりするときにはチョー便利ですよね!
そんな要素の検証を使っている時、「ああ、このリンクにマウスを乗せたときの色を確認したいなぁ」なんて時があります。ありませんか?
そんなとき、マウスを乗せっぱなしにしても色情報が表示されないんですよね・・・。
実は、要素を検証でマウスオーバー時のCSS(hover)を確認するには以下の操作が必要なんです。

「要素の検証」でマウスオーバー時の状態を確認する手順

まずは要素の検証を開きましょう。
年末年始に遊ぶ用に iPhoto iPadで遊べる名作ゲーム 428 を購入 そふぁねブログ
要素の検証を開いたら、マウスオーバーの状態が見たい行を選んで、右側に注目。
点線のワクにマウスカーソルが乗ったようなマークがありますね。コレを押しましょう。

年末年始に遊ぶ用に iPhoto iPadで遊べる名作ゲーム 428 を購入 そふぁねブログ 5
押すと、4つのチェックボックスが出てきます。
年末年始に遊ぶ用に iPhoto iPadで遊べる名作ゲーム 428 を購入 そふぁねブログ 4
このなかから、:hoverのチェックボックスにチェックを入れましょう。
年末年始に遊ぶ用に iPhoto iPadで遊べる名作ゲーム 428 を購入 そふぁねブログ 2
めでたくマウスオーバー時の色などなどが表示されました。

hoverだけじゃなく、active, focus, visitedもあるよ

画像を見て分かるように、hover以外の状態についてもチェックを入れることで確認できます。

使えると便利な「要素の検証」、素人でも大丈夫!

アイコン
要素の検証、使えるとかなり便利です。
今のCSSを書き換えずに、その場でお試し&確認ができるところが良いですね。
使いこなせばいろんなことが出来るんですが、何も全部使う必要はありません。自分が必要なところだけ、使えればいいのです!私もHTMLとCSSをただ見る以外では、この「hoverにする」くらいの使い方しかしていません。
気になる方は他のボタンも押しつつ、どんなことが出来るのか探ってみても楽しいですよ!

スポンサードリンク

1b3d8227ea287d41a461fabcd436f876.jpg

シェアしてみませんか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です