コーディング

chromeデベロッパーツール(開発者ツール)の使い方【入門編】

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のコードが確認できます。

タブを確認しよう

[jin-fusen2 text=”オレンジ枠の部分にタブがあります。”]

上部にあるタブを確認

「Elements」,「Console」,「Source」などと書かれています。

最初の時点では「Elements」が開かれています。

この「Elements」はHTMLを表示するタブです。

他にもいくつかタブがありますが、

まずはこの「Elements」タブでHTML,CSSの見方や変更の仕方を見ていきましょう。

HTMLのコードを調べてみよう

ElementsタブでHTMLタグがどのように作られているか調べてみましょう。

[jin-fusen2 text=”① 矢印をクリックします。”]

矢印をクリック

矢印をクリックすると矢印の色が青くなるので、その状態で調べたい要素にカーソルを合わせてクリックします。

ここでは左上の「Googleについて」という文字を構成している要素を調べたいと思います。

[jin-fusen2 text=”② 「Googleについて」をクリック”]

Googleについてをクリック

すると要素の情報を見ることが出来ます。

薄い青色で表示されたaタグが「Googleについて」を囲っている要素です。

[jin-fusen2 text=”③ 選択したタグが薄い青で表示される。”]

選択した要素のタグが薄い青色で表示される。

「Googleについて」という文字がaタグで囲まれていることがわかります。

このようにデベロッパーツールでは要素のタグ構成を知ることが出来ます。

タグの左に「▶︎」がついている場合は、そのタグの子要素が隠れている状態です。「▶︎」をクリックするとそのタグが展開され子要素まで見ることが出来ます。

[jin-yohaku30]

HTMLを変更しよう

HTMLを変更してみましょう。

今回はサイト右上の「Gmail」という文字を「テキストを変更」に変更してみます。

aタグの「Gmail」というテキストをダブルクリック。
「テキストを変更」と入力。

HTMLを変更する

するとサイト上でも表示が変更されます。

ここで注意なのは、これはあくまでデベロッパーツール上でを変更しているだけで

実際のサイトが変更されるわけではありません。

ページを再読み込みすれば元に戻ります。

そのため例えば自分で作成しているサイトをデベロッパーツール上から変更してもそれだけで保存されることはありません。

CSSのコードを調べてみよう

CSSはこちらから見ることが出来ます。

CSSを確認する
[jin-yohaku40]

拡大して見てみましょう。
選択したタグに当たっているCSS
CSSが書かれている場所

CSSの見方

どこのCSSファイルの何行目に書かれているかが表示されています。

(index):** という表記は外部のcssファイルではなく、
そのhtmlファイル内のheadタグ内で<style></style>を使って記載されているCSSであることを表しています。

CSSを変更しよう

では今度はCSSを変更してみましょう。

HTMLの要素を選択するとそこに適用されているCSSが表示されていますので値を変更してみます。

すると入力できる状態になります。

Googleのロゴ画像の位置を変更してみましょう。

「109px」と書かれている部分をクリック
テキストが編集できるようになるので「0」を入力
右の白い余白をクリックして完了

CSSを変更する

CSSを書き換えた瞬間にGoogleのロゴがページ上部に移動したのがわかります。

このように変更ができるので、CSSを変えたらどんな表示になるか試しに見てみたい時などに便利です。

ちなみに

表示されているクラス名のなかにCSSを追加したり変更を加えると

同じクラス名の要素全てにCSSが適用されます。

「element.style」の部分にCSSを追加すると

選択しているHTML要素にだけCSSを効かせることが出来ます。

以上、chromeデベロッパーツール(開発者ツール)の使い方【入門編】でした!

コーディングに便利なwebサイトおすすめ5選

スポンサーリンク

-コーディング
-

© 2020 まめしばweb Powered by AFFINGER5