Webサイト検証、デバッグの仕方

Webサイト検証、デバッグの仕方

googleのブラウザ「Chrome」を使ったサイトの検証のやり方を説明します。

検証すると何がわかるの?

ホームページのソースコードが見れるため、画像のサイズやレイアウトが

どのような値で配置されているのかといったことがわかります。

 

chromeの「検証」の活用法

他の人が作ったサイトを検証することで自分が似たようなWebサイトを作る時に参考になる。

Webサイトの製作時、どこでバグが出ているか調べられるのでデバッグに便利。

 

「Chrome」を使用したWebサイト検証、デバッグの仕方

今回はyahooトップページのロゴサイズを調べてみます。

1  Yahooにアクセスします。https://www.yahoo.co.jp/

2  何もないところで右クリック、検証を選択します。

3  ソースコードが出てくるので左上をクリック。

 

4  yahooのロゴを選択するとサイズや、どんな名前の属性を使っているのかスケスケだぜ!