【HTML＆CSS】Googleデベロッパーツール（検証ツール）使い方

2022年7月26日

googleデベロッパーツール（検証ツール）使い方

このようなギャラリーサイトを作ってみました。

スマートフォンではどのように見えるかみてみたい時などにデベロッパーツールは」とても便利です。

デベロッパーツールを開く

googleで検証したいサイトを開いたら右上の『︙』から『その他のツール』→『デベロッパーツール』と選択してデベロッパーツールを開きます。

するとこのようなものが開きますが、なんだか怖くてすぐに閉じたくなります。

デベロッパーツールの配置を変更

最初右側に出ますが、ここから左側に表示したり下に表示したりできます。

スマホ用の画面を見る時はサイドに表示してPC用で見る時は下に表示するなどすると全体が見れるので良いと思います。

device tool

さまざまなデバイスからの見え方を検証する時に使う『device tool』を見ていきましょう。

このスマートフォンとタブレットのようなアイコンをクリックすると画面がスマートフォンの画面の大きさに変わります。

この下向き三角を押すとさまざまなデバイスが選べます。

自分が作ったサイトが、スマートフォンやタブレットで見た時はどうか、ボタンや文字は小さすぎないかここで確かめることができます。

要素を細かく見る

先程のスマートフォンモードが見れるツールの左『矢印の□』をクリックして選択します。青くなっていたら選択されています。

この状態で検証したい要素をポイントしてみましょう。

このようにポイントした要素の情報が細かくわかります。

そして要素をクリックするとHTML、CSSの情報がこちらでわかります。

デベロッパーツール上で直してみる

よく見るとタイトルと下の画像が少しずれていて気になります。

画像のあたりをポイントしてみると下の画像のように画像の左側にパディングが入っているのがわかります。

『ul』要素にはデフォルトでパディングが付いているのでしょうか40pxついてます。

そしてここを見れば、『style.css』の50行目を見れば良いことがわかります。

早速元のCSSファイルでパディングを0pxにすると

ずれていたタイトルと画像がピッタリ合いました。

このようにCSSでなかなかうまくいかない時にデベロッパーツールで見てみると原因が分かりやすくとても便利です。

レイアウトを変えてみる

この□をクリックするとレイアウトを変えてみることができます。

このように違うレイアウトを試してみることができます。

このレイアウトに変更しようと思ったら、デベロッパーツールのCSSをコピーして元のCSSファイルに貼り付けます。

もとのファイルを変えないとデベロッパーツール上で変更しただけでは元のファイルには反映されないので変更したい時は元のファイルにコピペして変更するようにしましょう。

色を変えてみる

このように色をクリックするとカラーピッカーが出てきて色を試すこともできます。

そして変更したい色が決まったら、コピペで元のCSSファイルを変更します。

まとめ

今回は簡単に使い方の説明をしました。

このようにデベロッパーツールは本当に便利なツールなので苦手な方も少しずつ触っていって慣れていくのが良いと思います。