Webで勉強!デベロッパーツールの使い方。

 

 Googleでデベロッパーツールを使い上記のようにhtmlを少し変えてみました。下記がGoogleのデフォルトになってます。

 

 

 まず、検証を押します。

検証を押すとデベロッパーツールが使えるようになります。

 

 

 このアイコンを使うとマウスで指定したところのタグの要素などがわかります。Googleのページの「日本」という文字にカーソルをするとこのタグの要素がわかります。

<div class=”logo-subtext”>日本</div>

 

 この<div>タグの間にある「日本」を変えることにより一番始めの画像のようになります。また、のアイコンを押すとタブレットで開いたような形になり、自由自在にサイズを変えることができます。

 

 

 デベロッパーツールを使えるようになると、HTMLの構造が見れるようになり、便利なので使って観ましょう!また、調べたいタグなどは ⌘command + F で調べることができます。

body{background:#98FB98;color:#222}

 一番最初の画面ではこのbackgroundの色が #fffになっているのでここを #98FB98 に変えています。ぜひ、HTMLの勉強などをしたい場合はこのデベロッパーツールを使ってみてください。


 

 

 

コメント

error:Content is protected !!