ここからのレッスンでは、実際に検証ツールを使って確認していきましょう。
練習用素材
練習用に、良くないコードのファイルをご用意しました。
素材タブから本コースの素材「developer_sozai.zip」をダウンロードして、htmlファイルをブラウザで開いてみてください。
見た瞬間に直したくなる箇所もあると思いますが、検証ツールを使うの練習をしながら直してみましょう。
Chrome検証ツールを立ち上げる
Google Chromeの検証ツールを開いてみましょう。 ブラウザでページを開き、右クリックしてください。
右クリックメニュー内にある、検証という項目をクリックしてください。
下記のショートカットでも立ち上げることが出来ます。
- windows：Ctrl + Shift + I
- Mac：Command + Option + I
下図のように、画面が分割されたような状態になるはずです。 これがデベロッパーモードです。
検証ツールの表示位置を変更する
Google Chromeの検証ツールの表示位置は、右上に表示されている点3つのアイコンで変更できます。
レスポンシブサイトの場合、検証ツールを横に表示すると、ページのレイアウトが変わってしまうことがあります。ご自身のモニター幅、検証したい部分を考えて配置を決めましょう。必要に応じて位置を切り替えるのもありです。
検証ツールの日本語化方法
日本語バージョンがリリースされたので、案内が表示されている方もいらっしゃるかもしれません（※表示がない方も後記の設定で変更できます）。 Switch DevTools to Japaneseをクリックすると、日本表示にできます。
本記事では日本語表示の画面を使って解説していきます。 英語のままで良い方はDon't show againで案内を閉じても良いです。
検証ツール一番上の列にある、歯車のアイコン。 ここをクリックすると検証ツールの設定ができます。
基本的にはどこも変更する必要はありません。 言語の切り替えと、ショートカットを使いたい方であればショートカットのカスタムを行うくらいでしょうか。
デベロッパーモードの見かた
検証ツール画面はフロントエンドエンジニアなどプログラミング領域でも使用されるので、メニューが多くて複雑に見えますよね。 ですが、HTMLとCSSのデバックであれば、使用する部分は限られています。
パネルの詳しい使い方は後ほど紹介します。 まずは、簡単にどこを使うのかを見ていきましょう。
主要な３つのパネル(Elements,Styles,Console)
Webサイトのコーディングを行う時、に主に使用するのは下記２つのパネルです。
- 要素(Elements)
- スタイル(Styles)
要素パネルではHTMLソースコードが確認できます。
スタイルパネルでは、選択した要素に指定されているスタイルが確認できます。
もう一つ、見ておきたいパネルにコンソール(Console)があります。 コンソールは上記この２つとは少し毛色が異なり、読み込めなかったファイルの存在やエラーを教えてくれるパネルです。
頻繁に見る必要はありませんが、赤いバツマークが表示されている時は要注意。 コンソールのタブを開いて、バツを付けられた問題点を確認しましょう。
普通にコーディングしている時は、あまりバツは出ません。 WordPressテーマにした際に、パスの変更忘れがあると出てきますね。 Javascriptに触るようになると、見る機会が増えるかと思います。
補助的な２パネル（Computed,Layout）
計算済み（Computed）・レイアウト(Layout)の２つは、スタイルパネルの補助的な役割があります。場合によっては使用すると便利ですが、無くても大丈夫くらいの位置付けです。
計算済では、選択した要素に適用されているスタイルが確認できます。
レイアウトでは、Flexボックスレイアウト・gridレイアウトの配置が確認できます。
