無料お見積りブログ
BLOG
hover時のCSS確認方法
良かったらハートを押してね！
こんにちは。
今回は、基本的な事ですがホームページのホバー時のCSSを確認したい場合の方法をご紹介したいと思います。
ホバー時のアニメーションを確認する際に知っておかないとどこの部分のCSSで指定されてるか特定が困難になり時間がかかってしまう為、知っておくだけで効率が上がります。
今回はGoogleChrome（グーグルクローム）のパターンで紹介します。
①管理者ツールを開く
まず最初に調べたいページを開いた状態でF12（管理者ツール）を開く。
そうすると上記のような形になります。
htmlでの修正や更新は管理者ツールで確認しながら進めるのが基本となっている為、覚えておくといいでしょう。
②調べたい箇所・動きを指定してする
①コード部分の調べたい箇所を指定します。
②その下、指定されている動きの項目にチェックを入れます。
③そうすると、ホバーした際のアクションが確認できます。
③指定されているCSSを確認する
画像黄色の部分がホバーの指定箇所です。
一方で、その下にある水色の部分がホバーされていない状態でのCSSです。
最後に
いかがでしたでしょうか。
今回は簡易的なものとなりますが上記の流れで見ていくとどこで指定されているか確認する事ができます。
今後も自分が行った作業の中で皆様のお役に立てる情報を配信していければと思いますので、よろしくお願いいたします
担当：Y
愛知 県内から 名古屋 を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17 花車ビル南館5F
TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから
