ここからのレッスンでは、実際に検証ツールを使って確認していきましょう。
練習用素材
練習用に、良くないコードのファイルをご用意しました。
素材タブから本コースの素材「developer_sozai.zip」をダウンロードして、htmlファイルをブラウザで開いてみてください。
見た瞬間に直したくなる箇所もあると思いますが、検証ツールを使う練習をしながら直してみましょう。
Chrome検証ツールを立ち上げる
それでは、検証ツールを開いてみましょう。
Google Chromeで素材のHTMLページを開き、右クリックしてください。
右クリックメニュー内にある「検証」をクリックしてください。
下記のショートカットでも、検証ツールの起動・終了ができます。
- 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レイアウトの配置が確認できます。
