目次
chromeデベロッパーツール（開発者ツール）とは
デベロッパーツールとは
Webサイトがどのように作られているか確認することができる機能です。
Web制作をするなら必ず使用することになるので使い方を見ていきましょう。
デベロッパーツールでできること
[jin-yohaku40]
[chat face=”mameshiba003.png” name=”まめしばくん” align=”left” border=”gray” bg=”none”]デベロッパーツールって何ができるの？[/chat]
[jin-yohaku50]
[box05 title=”デベロッパーツールでできること”]
- WebサイトのHTMLやCSSのコードを見る
- HTMLやCSSを書き換えてテストする
- スマホサイズでどう表示されるか確認する
- サイトでエラーが発生しているか確認する
[/box05]
上記以外にも多くの機能があります。
自分のサイトや世の中のサイト全てを検証することができるのでどんな作りになっているか確認すると非常に勉強になります。
chromeデベロッパーツール（開発者ツール）の使い方を紹介
それでは実際にデベロッパーツールを使っていきましょう。
デベロッパーツールの開き方
[jin-yohaku50]
①まずはGoogle Chromeを開いてください。
今回はGoogleの検索ページを検証してみます。
https://www.google.com/をGoogle Chromeで開きましょう。
[jin-yohaku50]
②サイト上で右クリックし検証を選んでください。
[jin-yohaku50]
③デベロッパーツールが表示されます。
以下の画像の赤枠部分のようにデベロッパーツールが現れます。
これがデベロッパーツールです。
画面右ではなく下に表示されることもありますがどちらも同じものです。
ここからサイトののHTMLやCSSのコードが確認できます。
タブを確認しよう
「Elements」,「Console」,「Source」などと書かれています。
最初の時点では「Elements」が開かれています。
この「Elements」はHTMLを表示するタブです。
他にもいくつかタブがありますが、
まずはこの「Elements」タブでHTML,CSSの見方や変更の仕方を見ていきましょう。
HTMLのコードを調べてみよう
ElementsタブでHTMLタグがどのように作られているか調べてみましょう。
矢印をクリックすると矢印の色が青くなるので、その状態で調べたい要素にカーソルを合わせてクリックします。
ここでは左上の「Googleについて」という文字を構成している要素を調べたいと思います。
すると要素の情報を見ることが出来ます。
薄い青色で表示されたaタグが「Googleについて」を囲っている要素です。
「Googleについて」という文字がaタグで囲まれていることがわかります。
このようにデベロッパーツールでは要素のタグ構成を知ることが出来ます。
タグの左に「▶︎」がついている場合は、そのタグの子要素が隠れている状態です。「▶︎」をクリックするとそのタグが展開され子要素まで見ることが出来ます。
[jin-yohaku30]
HTMLを変更しよう
HTMLを変更してみましょう。
今回はサイト右上の「Gmail」という文字を「テキストを変更」に変更してみます。
するとサイト上でも表示が変更されます。
ここで注意なのは、これはあくまでデベロッパーツール上でを変更しているだけで
実際のサイトが変更されるわけではありません。
ページを再読み込みすれば元に戻ります。
そのため例えば自分で作成しているサイトをデベロッパーツール上から変更してもそれだけで保存されることはありません。
CSSのコードを調べてみよう
CSSはこちらから見ることが出来ます。
[jin-yohaku40]
どこのCSSファイルの何行目に書かれているかが表示されています。
(index):＊＊ という表記は外部のcssファイルではなく、
そのhtmlファイル内のheadタグ内で<style></style>を使って記載されているCSSであることを表しています。
CSSを変更しよう
では今度はCSSを変更してみましょう。
HTMLの要素を選択するとそこに適用されているCSSが表示されていますので値を変更してみます。
すると入力できる状態になります。
Googleのロゴ画像の位置を変更してみましょう。
CSSを書き換えた瞬間にGoogleのロゴがページ上部に移動したのがわかります。
このように変更ができるので、CSSを変えたらどんな表示になるか試しに見てみたい時などに便利です。
ちなみに
表示されているクラス名のなかにCSSを追加したり変更を加えると
同じクラス名の要素全てにCSSが適用されます。
「element.style」の部分にCSSを追加すると
選択しているHTML要素にだけCSSを効かせることが出来ます。
以上、chromeデベロッパーツール（開発者ツール）の使い方【入門編】でした！