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

スポンサーリンク

 

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

 

 

 まず、検証を押します。

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

 

 

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

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

 

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

 

 

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

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

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


 

 

 

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

Toshikazu Hiranoをフォローする
All
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント

Translate »