初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説。

mogaBlog

Web コーディング

【初心者必見】まずはこれだけ!デベロッパーツールの使い方【chrome】

投稿日:2020年2月5日 更新日:

【初心者必見】まずはこれだけ!デベロッパーツールの使い方【chrome】
web制作に欠かせないのが、GoogleChromeのデベロッパーツール(開発者ツール)。
CSSやJavaScriptが上手く反映されないときに使ったり、他のサイトのソースコードを覗いたり、使い方はさまざまです。

最初は少し難しく思うかもしれませんが、web制作における必須ツールなのでがんばって慣れましょう!
今回は、実際にhtmlコーディングを進めるにあたりよく使う機能に絞って、使い方を解説します。

デベロッパーツールとは?

web制作などを行う開発者むけに用意されたツールです。
ページのhtmlやcss、JavaScriptのエラーなどを確認できるので、web制作では必ずと言っていいほど使います。

「開発者ツール」「検証ツール」とも呼ばれます。

起動方法

デベロッパーツール

まずはデベロッパーツールを表示させましょう。
起動するとクロームの下側ににょきっと現れます。
(私は右側が見やすいので表示位置を右にしています)

起動方法

  • windows:キーボードの「F12」
  • Mac:Command+Option+I

※本記事はバージョン: 79.0.3945.130をベースに記載しています。
バージョンが違う場合、若干の操作・見た目が違う可能性がありますのでご注意ください。

上記の方法で起動できない場合は、

  1. ページ上で右クリック
  2. 「検証」をクリック

でも起動できます。

ページ上で右クリック、検証で起動

表示位置の変更

デベロッパーツールの表示位置が気に入らないときは変更しましょう。

  1. デベロッパーツールの右上にあるメニューボタンを押す
    メニューボタン
  2. 表示位置の変更ボタンで好きな表示位置を選ぶ
    表示位置の変更ボタン

HTMLを確認する

まずhtmlコーディングにおいてよく使うのは、htmlの要素の確認です。
htmlは↓この部分に表示されています。
htmlは ここをチェック

使いどころ

  • 表示崩れの修正
  • htmlを仮に反映する
  • 他サイトのソースを覗き見

使い方が分かれば使いどころについても理解できますよ!
では使い方を説明していきます。

画面内の要素からhtmlを確認

画面内の要素から、該当するhtmlの確認をする方法です。

  1. デベロッパーツールの左上にある【矢印マーク】を押す
    矢印を押す
  2. 画面内の調べたい要素をクリック
  3. 該当するhtmlがデベロッパーツールで青くハイライトされる
    画面内の要素からhtmlを確認

画面内の要素にマウスカーソルを乗せるだけでソースもハイライトされますが、クリックすることで選択した個所を固定できます。
固定することで、該当箇所のhtmlソースを詳しく確認できますよ。

ソース内の矢印を押すとソースが展開されます。
ソース内の矢印を押してソースを展開

htmlソースから画面内の要素を確認

逆にhtmlソース側からページ内の要素をハイライトすることもできます。

  1. ソース内で調べたい箇所をクリック
  2. 画面内の該当要素がハイライトされる
    htmlソースから画面内の要素を確認

htmlを仮に書き換える

デベロッパーツール上でhtmlの書き換えもできます。
書き換えた内容は画面にも反映されます。手元のhtmlファイルの修正・更新をしなくても、編集した結果がサクッと確認できて便利です。

デベロッパーツール上で編集した内容は、ページを更新すると消えてしまいます。
必要ならコピペしてソースを保存しておきましょう!

一部だけ書き換え

一部だけ書き換えたい場合にはこの方法を使います。

  1. 書き換えたい内容の上でダブルクリックし、↓この状態にします
    htmlの一部書き換え
  2. 内容を書き換え、Enterを押します
  3. 画面に反映されました!
    htmlを一部書き換え

広範囲な書き換え

要素の挿入など、広範囲に書き換える場合の方法です。

  1. 書き換えたい部分の上で右クリック
  2. "Edit as HTML"をクリック
    "Edit as HTML"をクリック
  3. 内容を書き換え、デベロッパーツール上のどこかをクリック(htmlの挿入・削除もできます)
    内容を書き換え、デベロッパーツール上のどこかをクリック(挿入・削除もできます)
  4. 画面に反映されました!
    画面に反映されました!



CSSを確認する

次にCSSの見方です!
CSSはここをチェック

使いどころ

  • 表示崩れの修正
  • 反映されているCSSの内容を確認
  • cssを仮に反映する
  • 他サイトのソースを覗き見

デベロッパーツールを使えば、CSSが効いていない原因を見つけられることが多いです。
作業時間の短縮にもつながるので、CSSの確認方法はしっかりと把握しておきたい部分です。

画面内orソースからcssを確認

画面内の要素もしくはソースの選択で、該当するcssを表示できます。

cssは要素にマウスを置くだけではなく、画面内の要素、もしくはhtmlソースをクリックしないと表示されません。

■画面内の要素からcssを表示

  1. デベロッパーツールの左上にある【矢印マーク】を押す
    矢印を押す
  2. 画面内の調べたい要素をクリック
    画面内の調べたい要素をクリック
  3. 該当するcssがデベロッパーツールに表示される
    該当するcssがデベロッパーツールに表示される

■htmlソースからcssを表示

  1. htmlソース内で調べたい箇所をクリック
  2. 該当するcssがデベロッパーツールに表示される

css部分の見方

css部分の見方

  1. 「何に対して」cssが設定されているか分かります
    「body」の場合→bodyタグに対するcssの内容
  2. 設定されているCSSの内容
  3. どのCSSファイルの何行目に書かれているか
    例)「style.css:17」→「style.css」というcssファイルの「17行目」

打ち消し線

デベロッパーツール上でCSSに打ち消し線が引かれていることがあります。
打ち消し線が引かれているCSSは適用されていません。

打ち消し線には2種類あります。

■パターン1:別のCSSが効いている

パターン1:別のCSSが効いている
上記画像の①の部分が打ち消されています。
これはほかのCSSで、①の内容が上書きされていることを示します。

この画像の場合は、「#about_img」というidセレクタに対し、①と「★」の2つのcssが適用されています。
①のmargin-bottomは打ち消されていますが、「★」は打ち消し線が引かれていません。
この場合は「★」の内容が「#about_img」のmargin-bottomに適用されています。

※cssでは後ろの行に書いた方が適用されるので、①より「★」の内容が優先されています。

■パターン2:cssがエラーになっている

パターン2:cssがエラーになっている
こちらの画像で示した個所では、打ち消し線の箇所に警告マークがでています。
これはcssがエラーになっていることを示します。

この場合はpaddingではなく、スペルミスでpadingとなっていますね。
このようなcssのタグは存在しないので、エラーになっています。

警告マークが出ていたら、まずスペルミスがないか確認してみましょう!

cssを仮に書き換える

デベロッパーツール上でcssの書き換えもできます。
htmlと同じく、書き換えた内容は画面にも反映されます。手元のcssファイルの修正・更新をしなくても、編集した結果がサクッと確認できて便利です。

デベロッパーツール上で編集した内容は、ページを更新すると消えてしまいます。
必要ならコピペしてソースを保存しておきましょう!

一部だけ書き換え

一部だけ書き換えたい場合にはこの方法を使います。

例として背景を茶色から青に変えてみます。

  1. 書き換えたい内容をクリックし、↓この状態にします
    書き換えたい内容をクリックし、↓この状態にします
  2. 内容を書き換え、画面の上を押します
  3. 画面に反映され、背景が青になりました!
    画面に反映され、背景が青になりました!
■「:」の前後どちらも編集できる

カラーコードなどの値だけではなく、「background」などのプロパティ(タグ)名も編集できます。
「:」の前後どちらも編集できる

■カラーピッカーが便利

色の変更にはカラーピッカーを利用すると便利です。

  1. カラーコードなどの前に表示されている【色の四角】を押す
    カラーコードなどの前に表示されている【色の四角】を押す
  2. カラーピッカーが立ち上がります
    カラーピッカーが立ち上がります

カラーピッカーを閉じたいときは、"Esc"キーを押すか、デベロッパーツールのどこかを押すと閉じます。

分かりづらい&よく使う機能だけ補足します。
カラーピッカー補足
①スポイト。画面上から色を吸い取れます。
②カラーコードをコピーできます。
③ 上のバーで色相を、下のバーで透明度を変えられます。
④カラーコードだけではなく、RGBの数値を表示するなどできます。

cssの追加

今設定されていないcssでも追加をすることができます。

■class名やタグに対して追加

class名やタグに対して、cssの記述を追加して書く方法です。
同じclass名、タグが使われている箇所すべてに反映されます。

  1. cssを追加したい部分の「余白」を押す
    cssを追加したい部分の「余白」を押す
  2. 入力できるフォームが表示される
  3. 追加したい内容を記述
    ※プロパティ(backgroundなど)を入力したあと、「Enter」で次の入力箇所に移動します
    追加したい内容を記述
■選択している要素「だけ」に追加

現在選択しているhtmlの要素に対してのみcssを追加します。
(同じタグやclassが他の箇所に使われていようと、選択していないところには反映されません)

  1. 追加した要素を画面上orHTMLから選択(クリック)
  2. "element.style"を押す
    ※cssが表示されている個所の一番上にあります
    "element.style"を押す
  3. 入力できるフォームが表示される
    入力できるフォームが表示される
  4. 追加したい内容を記述
    追加したい内容を記述

cssの非適用

cssの上にカーソルを持っていくとチェックボックスが現れます。
cssの上にカーソルを持っていくとチェックボックスが現れます。

このチェックボックスのオン・オフによって、cssの効果を適用・非適用できます。
下記の画像で、backgroundのチェックを外してみます。
cssの効果を適用・非適用

左側の画面の背景色が茶色から白に変わりましたね。
backgroundのチェックを外したことで、背景色が非適用となりました。

微妙な調整

配置の微妙なずれなど、1px単位の調整がしたいときってありますよね?
でもcssを更新→ブラウザを更新・確認→cssを更新・・・と繰り返すのは大変です。

デベロッパーツールを使えば、リアルタイムで表示を確認しながら、1px単位の調整ができます。
※remなどの別の単位、line-heightなど単位がないものも調整できます。

数値の調整

  • 1px単位:キーボードの↑↓キー
  • 10px単位:shift + ↑↓キー

要素のpaddingやmarginを調べる

cssを読まなくても、要素のpaddingやmarginはデベロッパーツールで簡単に確認できます。

デベロッパーツールのcss部分を下にスクロールしていくと、下の画像のようなオレンジや緑の四角が現れます。
要素のpaddingやmarginを調べる

これを使えば、以下の項目が簡単に調べられます。

  • 要素のサイズ
  • borderの太さ
  • paddingのサイズ
  • marginのサイズ

使い方は簡単。

  1. デベロッパーツールの左上にある【矢印マーク】を押す
    矢印を押す
  2. 画面内の調べたい要素をクリック
    画面内の調べたい要素をクリック
  3. オレンジや緑のボックスまでcssをスクロール
  4. ボックス上にmarginなどの数値が表示されています!
    ボックス上にmarginなどの数値が表示されています!
要素にマウスを重ねるだけでも、要素の大きさやmarginなどを調べることができます。
青=要素の大きさ、緑=padding、オレンジ=margin
要素にマウスを重ねるだけでも、要素の大きさやmarginなどを調べることができます。
※マウスを外すと消えてしまいまうので、数値を見ながら作業をしたい場合は、先ほど説明したボックスを使いましょう。



スマホ/タブレット表示に切り替え

スマートフォン表示やタブレット表示に切り替える機能です。
レスポンシブwebデザインに対応したサイトの制作では、デベロッパーツールをスマートフォンやタブレット表示にして確認しながら作ります。

  1. デベロッパーツール左上の【スマホ・タブレットマーク】を押す
    デベロッパーツール左上の【スマホ・タブレットマーク】を押す
  2. 切り替わりました!
    切り替わりました!

もう一度、【スマホ・タブレットマーク】を押すと解除されます。

注意

デベロッパーツールでは問題がなくても、実際のスマホで見たら表示がおかしい!ということがたまにあります。
デベロッパーツールを過信しすぎず、実際の端末でも検証することをおすすめします。

端末を切り替える

iPhoneXやiPadなど、確認したい端末の画面サイズに切り替えることができます。

リストから選ぶ

あらかじめ用意されたリストから端末を選ぶことができます。

  1. 機種名か「▼」の上を押す
    機種名か「▼」の上を押す
  2. リストから切り替えたい端末を選ぶ
    リストから切り替えたい端末を選ぶ
  3. 表示されているサイズが小さいとき

    倍率を確認しましょう。
    倍率は↓の画像の部分で変更できます。
    倍率を確認

    たまに70%など100%以外の値になっていることがあります。

    好きなサイズを指定する

    1. 端末リストの一番上にある"Responsive"を選択
      端末リストの一番上にある"Responsive"を選択
    2. 任意の数字を入れます
      任意の数字を入れます
    3. つまみでも調整できます
      つまみでも調整できます

    端末を新規登録

    1. 端末リストの下の方にある"Edit"を選択
      端末リストの下の方にある"Edit"を選択
    2. 機種リストが開きます
      機種リストが開きます
    3. 追加したい機種がリストにある場合
      ⇒チェックボックスにチェックを付けるだけでOK
    4. 追加したい機種がリストにない場合
      ⇒"Add Custom Device"から機種を登録します
      "Add Custom Device"から機種を登録します
      "Add Custom Device"から機種を登録します

    まとめ

    デベロッパーツールの基本的な使い方について説明しました。
    今回説明した機能は本当によく使うので、ぜひ早いうちから慣れておきましょう!

    他の人が作ったサイトでもデベロッパーツールを使えば中身を見たり、仮に編集したりすることができます。
    他のサイトの実装方法をみるもの勉強になりますよ。

    この記事を書いた人

    moga

    moga

    歴14年のフロントエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

Ads



-Web, コーディング

Copyright© mogaBlog , 2021 All Rights Reserved Powered by STINGER.