【図解たっぷり】Chrome検証ツール入門！コーディングの“崩れる”“直せない”を解決

コーディングをしていて、誰もが嵌る落とし穴「見た目が崩れる」。
初めてHTML&CSSを書いてから今まで、全て一発で綺麗に作れたという人はまず居ません。あれぇ…と原因を探して（自分を呪いながら）直して、Webページを完成させているんです。

問題は、間違えないかではなく、原因を見つけて直せるか。
生徒さんの質問を見ていると、多くの方が検証ツールを使えず苦労してまっているように思います。直し方がわからない……なんてなるとストレスも倍増ですよね。

Webデザイン・コーディング初心者の方がまず覚えるべき、検証ツールの使い方を７つのステップに分けて紹介します。コーディング時間とストレスの軽減を目指しましょう！

• 検証ツールとは
• 検証ツールで出来ること
• Webデザイナーが覚えたい、検証ツール活用の７ステップ
• 1.Chrome検証ツールを立ち上げる
• 2.デベロッパーモードで使う部分
• 3.検証したい部分を選ぶ
• 4.要素パネルでHTMLを確認・編集する
• 5.適用されているスタイルを確認
• 6.ブラウザ上でスタイル指定を変更する
• 7.表示デバイスサイズを変更する
• 間違い探し! 検証ツールで崩れたページを直そう
• ①キャッチコピーの表示・非表示
• ②ヘッダーナビゲーションの隙間
• ③自社プロダクト、画像とテキスト間の余白
• ④自社プロダクト、２個めのアイテム
• ⑤サイトバーのお知らせリスト

検証ツールとは

検証ツールとはWebページなどを作成する際に、その構造（HTMLやCSSなど）がどのようになっているか確認できるツールのことです。

Google Chromeなどのブラウザにも搭載されており、ブラウザで表示しているページのHTMLや適用されているスタイルを確認したり、変更したりすることが出来ます。
検証ツールが起動している状態を「デベロッパーモード（検証モード）」と呼ぶこともあります。

検証ツールで出来ること

• スマホやタブレットでどう見えるか検証できる
• HTMLの閉じタグ抜けがわかる
• レイアウト崩れの原因がわかる
• 表示が崩れているところを、自分で直せる
• marginやpaddingの値で悩まなくなる

　　　↓
コーディング完成が劇的に早くなる！

これらのメリットは、制作するWebサイトのデザインや構成が複雑になるほど強く感じられます。スタイルシートが何千行になってくると、自分で書いた指定を忘れていたり、スタイル指定が何重にも重なっているなんて事もありますしね。

Web制作、特にフリーランスでお仕事を受ける場合は「崩れました、直し方を教えて」とは言えません。言える相手もいないでしょう。更に、納期も切られています。
そんな状況で、使い慣れていないツールを使って四苦八苦するのは地獄。

ですので、コーディングの学習と合わせて、早い段階から検証ツールも使って慣れていきましょう。コーディング力と自己解決力がダブルで向上しますよ。

Webデザイナーが覚えたい、検証ツール活用の７ステップ

実際に検証ツールを使いながら、出来ることを確認していきましょう。

練習用に、良くないコードのファイルをご用意しました。
見た瞬間に直したくなる箇所もあると思いますが、ここは検証ツールの練習をしながら直してみてください。

ダウンロードはこちら

1.Chrome検証ツールを立ち上げる

Google Chromeの検証ツールを開いてみましょう。
ブラウザでページを開き、右クリックしてください。

右クリックメニュー内にある、検証という項目をクリックしてください。

下記のショートカットでも立ち上げることが出来ます。

• windows：Ctrl + Shift + I
• Mac：Command + Option + I

下図のように、画面が分割されたような状態になるはずです。
これがデベロッパーモードです。

ツールの表示位置は、右上に表示されている点3つのアイコンで変更できます。

レスポンシブサイトの場合、検証ツールを横に表示すると、ページのレイアウトが変わってしまうことがあります。ご自身のモニター幅、検証したい部分を考えて配置を決めましょう。必要に応じて位置を切り替えるのもありです。

日本語化と設定

日本語バージョンがリリースされたので、その案内が表示されている方もいらっしゃるかもしれません（※表示がない方も後記の設定で変更できます）。
Switch DevTools to Japaneseをクリックすると、日本表示にできます。

本記事では日本語表示の画面を使って解説していきます。
英語のままで良い方はDon't show againで案内を閉じても良いです。

検証ツール一番上の列にある、歯車のアイコン。
ここをクリックすると検証ツールの設定ができます。

基本的にはどこも変更する必要はありません。
使うのは言語の切り替えと、ショートカット好きであればショートカットのカスタムくらいでしょう。

2.デベロッパーモードで使う部分

検証ツール画面はフロントエンドエンジニアなどプログラミング領域でも使用されるので、メニューが多くて複雑に見えますよね。
ですが、HTMLとCSSのデバックであれば、使用する部分は限られています。

パネルの詳しい使い方は後ほど紹介します。
まずは、簡単にどこを使うのかを見ていきましょう。

主要な３つのパネル

Webサイト制作時に主に使用するのは、下記２つのパネルです。

• 要素(Elements)
• スタイル(Styles)

要素パネルではHTMLソースコードが確認できます。

スタイルパネルでは、選択した要素に指定されているスタイルが確認できます。

もう一つ、見ておきたいパネルにコンソール(Console)があります。
コンソールは上記この２つとは少し毛色が異なり、読み込めなかったファイルの存在やエラーを教えてくれるパネルです。

頻繁に見る必要はありませんが、赤いバツマークが表示されている時は要注意。コンソールのタブを開いて、バツを付けられた問題点を確認しましょう。

普通にコーディングしている時は、あまりバツは出ません。
WordPressテーマにした際に、パスの変更忘れがあると出てきますね。
Javascriptに触るようになると、見る機会が増えるかと思います。

補助的な２パネル

計算済み（Computed）・レイアウト(Layout)の２つは、スタイルパネルの補助的な役割があります。場合によっては使用すると便利ですが、無くても大丈夫くらいの位置付けです。

計算済では、選択した要素に適用されているスタイルが確認できます。

レイアウトでは、Flexボックスレイアウト・gridレイアウトの配置が確認できます。

3.検証したい部分を選ぶ

では、検証ツールを使ってみましょう。
Webページの中から、検証（確認）したい部分を選んでみます。

検証ツールの右上にある矢印のマークをクリック。
青色になったら、選択ツールが有効になっています。

選択ツールが有効の状態で、ブラウザ（Webページ表示部分）にマウスカーソルを移動してみましょう。マウスが重なった部分がハイライト表示されます。
調べたい部分でクリックすると、止まります。

これで確認したい要素の選択が出来ました。

選択ツールを使わずに、要素パネルの側から要素を指定することも可能です。
HTMLで作ったはずのパーツが画面上にない、なんて時はこちらも使用します。

4.要素パネルでHTMLを確認・編集する

検証したい箇所を選んだら、要素パネルを見てみましょう。
選択ツールで選んだ場合も、クリックした部分が自動的にハイライトされていました。

構造の確認

ソースコードの下には入れ子構造が示されています。
下図、オレンジ色の線で囲った部分です。

ulタグ部分の横にある▶をクリックして展開。
li要素をクリックしてみてください。
そうすると表示が切り替わり、ulが親要素になりました。
ulはnavタグの子要素で…と祖先を辿れるわけです。

CSSでは子孫セレクタで、スタイル指定をする箇所を絞り込むことが出来ます。
セレクタの書き方に迷った時に見ると、分かりやすいです。

HTMLの書き換え

要素パネルでは、今のHTMLを書き換えることも出来ます。

コンソールにエラーが出ていた、サイドバーの画像部分を選択してみましょう。
右クリックして「HTMLとして編集」を選ぶと、打ち替えられるようになります。

正しい拡張子に打ち替えると、画像が表示されました。

※正しい画像のパスまでは検証ツールも教えてくれません。
自分でimagesフォルダを確認します。

「HTMLとして編集」はクラスを変更してみたり、テキストが長くなった時にレイアウトが崩れないか確認したりと、使いどころは結構あります。

！注意：検証ツールで上書きは出来きません

検証ツールを使うと画面上でHTMLやCSSを変更し、どうなるか検証できます。
ただし、これはあくまでも検証。
htmlなどのファイルそのものを上書きしているわけではないので、ページを再読み込みすると元に戻ってしまいます。

次のCSSの検証の方に入ると「最適なスタイル指定がわかったのに、消えてしまった」という事態にも。CSSはHTMLよりも細々変更することが多いので、悲しい思いをします。
検証ツール上で直して上手くいったところは、忘れずエディタに書き写すようにしましょう。

早速、index.htmlの画像パスを直しておきましょう。

5.適用されているスタイルを確認

いよいよ本番！ スタイルパネルを見ていきましょう。
実際のWeb制作、検証と修正では圧倒的にスタイルの利用頻度が高いです。

ヘッダーにある、<nav>タグで囲った部分。
ここだけ右に寄っていますよね。

原因を調べてみましょう。
選択ツールを使って、調べたい要素を選びます。
ulタグにマウスカーソルを重ねると、カラフルな表示になるはずです。

クリックして選択を確定しましょう。
要素のパネルで、選択した<ul>にハイライトされていればOKです。

その状態で本題の、スタイルのパネルを見てみてください。
一番下にCSSボックスモデルの図が表示されています。
ここでは要素の幅、margin,paddingがどのくらい設定されているかが、まとめて確認することができます。カーソルを重ねると、画面上でどこに該当するかも教えてくれますよ。

こうして見てみると、原因は<ul>タグの左に40pxのpaddingが入っていることだとわかります。緑色で表示されたpaddingがなければ、左端の位置が揃いますね。

ちなみに、指定した覚えのないpaddingがどこからきているのかもスタイルパネルで確認できます。ボックスモデル図よりも少し上にスクロールしてみましょう。
ユーザーエージェント スタイルシートの欄に「padding-inline-start: 40px;」があるはずです。ここでのpadding-inline-startは左paddingのことと思って下さい。

ユーザーエージェント スタイルシートは、ブラウザ側がWebページを見やすくするために勝手につけているスタイル指定。ブラウザがベースセッティングをしてくれているので<h1>タグで囲うと特大太字になるなど、タグで囲うだけで文字の大きさが自動的に変わるのです。
ありがたい反面、今回のように邪魔になってしまうこともあります。

6.ブラウザ上でスタイル指定を変更する

原因がわかったら、修正するためのスタイル指定を書きましょう。

もう一度スタイルパネルを見て下さい。
一番上のdisplay:blockは無効になっています。

なぜ無効になっているかといえば、style.cssでdisplay:flexを指定しているから。
スタイル指定は上書きすることが出来るのです。

ということは、style.cssでpaddingをゼロにする指定を書けば良さそうです。

先程“ここでのpadding-inline-startは左paddingのこと”と紹介しました。
分かりやすいpadding-leftを使って書きたいのですが、ユーザーエージェントスタイルシートと違う書き方になるので、効かなかったら嫌ですよね。
padding-leftプロパティでも大丈夫か、検証ツールで試してみましょう。

CSSの試し方は簡単。
追加したい部分をクリックして、試したいスタイル指定を入力するだけです。
そうすると「そのスタイル指定があった場合」の表示に変わります。

padding-leftでも、左に揃いましたね。

リロードすると消えてしまうので、style.cssに追記しておきましょう。

スタイルパネルに入力したものは、コピーも可能。
たくさん書いた時は丸ごとコピペすると楽です。

プロパティ横のチェックボックス

スタイルパネル、ユーザーエージェントスタイルシート以外は各プロパティ横にチェックボックスが表示されます。
チェックを外してあげると、その指定が無い場合の表示を確認できます。

チェックを外した状態でエディタにコピペすると、無効化箇所はコメントアウトされた状態で張り付けられます。便利ですね！

スタイルの記述ミス

選択ツールもしくは要素パネルから、footerを選択してください。
paddingの表示が打ち消され、！マークが出ています。

!マークにカーソルを重ねると、なぜ適用されないかを教えてくれます。

この場合は単位が足りていませんね。
3remと単位を入れると、!マークが消えてスタイルが適用されます。

7.表示デバイスサイズを変更する

自分のPCモニター以外でサイトを見た時の表示を確認しましょう。
選択ツールの横にある、スマホのような形のアイコンを使います。

クリックしてみましょう。
Webページを表示している部分の見え方が、少し変わります。
下図の場合はiPhone6/7/8で見た時のプレビューです。

サイズ：の横にある▼をクリックすると、ポピュラーなスマホやタブレットの機種名が出てきます。選択肢から別のものを選べば、その端末のサイズに表示を切り替えてくれます。

この機能を使って、スマホやタブレットで見ても問題ないかを確認します。

• レイアウトは崩れていないか
• 要素がはみ出して、変な横スクロールは出ていないか
• ページの見やすさは維持されているか

※検証ツールのスマホ/タブレットモードは、端末の環境を完全に再現したものではありません。時々、スマホのブラウザでは対応していないCSSプロパティもあるので、最後は実機で見るのが一番確実です。

間違い探し! 検証ツールで崩れたページを直そう

間違い探し感覚で、崩れているindex.htmlを直してみましょう。

index.htmlで上手く行っていないのは、下記の５箇所です。
それぞれ作りたいレイアウトを再現できるように、検証ツールも活用しながら原因と解決方法を探していきます。

①キャッチコピーをスマホで非表示にしたい

作りたいレイアウト

問題：PCでも非表示になっている

②ヘッダーナビゲーションを等間隔にしたい

問題：会社概要とお問い合わせの間隔が、ホームと会社概要より広い

③自社プロダクト、画像とテキスト間の余白

問題：余白を設定したはずなのに、CSSが効かない

④自社プロダクト、２個めが崩れてしまった

作りたいレイアウト

問題：２つめが横並びにならない

⑤サイトバーのお知らせを普通に表示したい

作りたいレイアウト

問題：横に並んでしまっている

①キャッチコピーの表示・非表示

PCで表示されていない、キャッチコピーを見てみましょう。
画面上に表示されていないので、要素パネルから探します。

<div class="copy">をクリック。
スタイルパネルを見ると、display:noneというCSSが表示されています。

チェックを外して無効化すると、キャッチコピーが表示されました。
このスタイル指定が原因ですね。

スマホ幅に切り替えて見てみましょう。
チェックを外したままだと、スマホ幅で見てもキャッチコピーが表示されています。

と、いうことは、メディアクエリの中に書いたつもりのスタイル指定が、幅に関係なく適用されていそうですね。
style.cssを見てみましょう。

.row{}の閉じカッコが重複して、メディアクエリが閉じてしまっていました。

.copy{}の後でメディアクエリを閉じましょう。

cssファイルを上書き保存して確認すると、スマホ幅のみ非表示になります。

②ヘッダーナビゲーションの隙間

ヘッダーナビゲーションの間隔をみてみましょう。

ulタグを選択すると、会社概要とお問い合わせの間に、四角が1つあります。
この表示のされ方は、4つのアイテムが横並びになっている状態です。

が、要素パネルを見てもli要素は３つ。
上図で赤い矢印を入れた四角部分には、照準を合わせられません。

こんな時の原因は「空白」が大半。
全角スペースが入っていないか、ドラッグしてみましょう。

ビンゴ。全角スペースが入っていました。

エディタの方も、最後の<li>の前でインデント線が切れています。

全角スペースを削除しつつ、字下げ幅も合わせましょう。

保存してもう一度ブラウザで確認すると、空白の四角が消えました。
同じ間隔で並んでいます。

わからない時は他のブラウザで見てみる

原因がわからん！という時は、Chrome以外のブラウザを使ってみるのもアリ。
大抵のブラウザには検証機能がついていて、使い方も概ね同じです。
ただ、ブラウザの色というか個性のようなものがあります。

私はFirefoxが好きで、Chromeと合わせて使っています。
デベロッパーモードは表示画面を右クリック→調査で起動します。

Firefoxでは、全角スペースが入っている箇所は[空白]と表示されます。
また、レイアウトパネルではFlexアイテムとして扱われている要素の一覧も表示してくれています。親切ですね。

別のブラウザのデベロッパーモードで見てみることで、ミスに気付けるかもしれません。全角スペースに限らず「わからない……」となった時は、視点を切り替えるような気持ちで別のブラウザも使ってみましょう。

③自社プロダクト、画像とテキスト間の余白

<main>タグ内、自社プロダクトのセクションを直していきましょう。
まず、横並び配置している画像とテキスト間の余白ですね。

検証ツールでテキスト（.description）をクリックしても、スタイルパネルには何の表示もされません。打ち消されているわけではなく、.descriptionへのスタイル指定自体が無いことになっているわけです。

この場合、原因はhtmlのクラス名とcssセレクタの不一致。
CSSファイルをよく見てみましょう。

discriptionと書くべきところが、discripionになっていました。
tが抜けています。

セレクタ名を直して保存すると、ちゃんとcssが効くようになります。

④自社プロダクト、２個めのアイテム

では次に、横並びレイアウトが崩れてしまっている部分。

検証ツールで見ると一発ですね。
横並びにするためにdisplay:flex;を指定している「row」クラス。
これが画像のところだけで終わってしまっています。
<div class="description">はFlexアイテムではないので、横には並びません。

<div class="description">がrowからはみ出しているのは要素＝HTMLファイル側の問題です。index.htmlを見てみましょう。

おおぅ……インデントがガタガタすぎる。
まずはインデントを整えたほうが見やすそうです。

index.htmlファイル、今回の箇所だけではなく全体的に崩れていますよね。
一個ずつ整えるのは面倒なので、一気にやっちゃいましょう。
Sublime Textの場合はソースコードを全選択（win：Ctrl +A / Mac：command + A）して、インデント最適化で全体のインデントを整えられます。

開始タグと終了タグの位置が揃ったところで、もう一回見てみましょう。
間違いなく、画像の下で<div class="row">が終了していますね。

<div class="row">の中にimageと.descriptionが入るよう直します。

レイアウト崩れが直りました。

⑤サイトバーのお知らせリスト

最後にサイドバー、お知らせの部分。
ここはヘッダーナビゲーションを横並びにするために書いた、flexが影響していることがわかります。

セレクタを「headerの中のul」という書き方にすれば戻りそうですね。
やってみましょう。

大丈夫そうなので、style.cssを打ち替えます。

次にli要素部分の表示。
理想はこんな感じです。

先ほどと同じ様に、セレクタをli から header li に変更してみます。

リストマークが表示されましたが、まだ理想のようにはなっていません。
「aside li」に対して、スタイル指定を加える必要がありそうです。

忘れないうちにstyle.cssでセレクタ変更を先にしておきましょう。

サイトバーのリスト部分は、下にmarginが欲しいのでそれも記述します。
（プロパティ値は、だいたいで指定してOK）

上書き保存して、ページを再読込します。

理想に近づきましたね。

リストマークの位置を、お知らせの「お」の下あたりにしたいので、ulタグのpadding-leftを変更してみましょう。スタイルパネル再上部の「element.style」欄を使います。

こんな感じで、プロパティ値は大体で入力しておき、変更しながらベストポジションを探すことも出来ます。

style.cssに書き写せば完成！

これで検証ツールの使い方は終わりです。
スマホ幅表示では、まだちょっと表示が変な箇所があります。復習も兼ねて調整してみて頂くと更に検証ツールに慣れることができますよ。