hover時のCSS確認方法

BLOG
ブログ

公開日:2022.8.30

良かったらハートを押してね！

HTML

CSS

hover

コーディング

こんにちは。

今回は、基本的な事ですがホームページのホバー時のCSSを確認したい場合の方法をご紹介したいと思います。

ホバー時のアニメーションを確認する際に知っておかないとどこの部分のCSSで指定されてるか特定が困難になり時間がかかってしまう為、知っておくだけで効率が上がります。

今回はGoogleChrome（グーグルクローム）のパターンで紹介します。

①管理者ツールを開く

まず最初に調べたいページを開いた状態でF12（管理者ツール）を開く。

そうすると上記のような形になります。

htmlでの修正や更新は管理者ツールで確認しながら進めるのが基本となっている為、覚えておくといいでしょう。

②調べたい箇所・動きを指定してする

①コード部分の調べたい箇所を指定します。

②その下、指定されている動きの項目にチェックを入れます。

③そうすると、ホバーした際のアクションが確認できます。

③指定されているCSSを確認する

画像黄色の部分がホバーの指定箇所です。

一方で、その下にある水色の部分がホバーされていない状態でのCSSです。

最後に

いかがでしたでしょうか。

今回は簡易的なものとなりますが上記の流れで見ていくとどこで指定されているか確認する事ができます。

今後も自分が行った作業の中で皆様のお役に立てる情報を配信していければと思いますので、よろしくお願いいたします

担当：Y

・WordPressパスワード保護のテキスト変更、都度入力

・HTML、CSSで縦書きをする方法

・【CSS・JS】ひと文字ずつ色を変える方法

愛知県内から名古屋を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから

良かったらハートを押してね！

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。

CONTACT

オンラインでのお打ち合わせも可能

ホームページを作りたい	ホームページを作った後	こんなことも
新しく作りたい	更新代行してほしい	写真撮影をしてほしい	多言語対応したい
スマホ対応したい	保守管理してほしい	動画をつくりたい	ライティングをしてほしい
リニューアルしたい	SEO対策をしたい	印刷物をつくりたい	イラストを描いてほしい
プチリニューアルしたい	WEB広告を出したい	ロゴをつくりたい	自社で簡単に更新したい
採用に特化したい			HP制作・運営サポートサービス
全部任せたい			採用特設HP「ウェブサイ」