Chromeの開発者ツールにて、マウスポインタ選択でいち早く構造を理解する

この記事は約148秒で読めます。

どうも!!こうすけです。

webサイトの構造を理解するときに、Chromeの開発者ツール 使用して、すぐにクラス名やスタイル等を特定するための方法を紹介します。

1. マウスポインタ選択は使う方法

マウスポインタ選択でクラス名やタグなどをいち早く理解する方法を説明します。

まずは、Google chromeのブラウザを立ち上げます。

立ち上げたら、メニュー→表示→開発/管理→デベロッパーツールを選択してください。

すると、画面の右側に開発画面が表示されます。

開発画面の左上にマウスポインタのアインコンがあるので、それを押下してください。

あとは、左側に表示されているサイトの構造を知りたい部分にマウスポインタを移動させると、その部分の構造が左側の開発画面に表示されます。

こんな感じでwebサイトの構造がすぐに理解できます。

このサイトどうやってできてるんだろうと知りたい時に助かりますね。

操作方法を動画に撮りましたので、説明でわからない場合は参考にしてください。

マウスポインタ選択

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

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