Web 制作をするときに初心者の人が困ることの一つとして、Web ページ画面上の“要素”がどのようなコードでそのようなデザインや動きになっているのかの、そもそもの調べ方がわからないということがあると思います。
とてもポピュラーな調べ方として「デベロッパーツール」というものを使う方法があります。「開発者ツール」とも呼ばれたりしますが同じものと考えて差し支えないかと思います。（本記事ではデベロッパーツールで統一して記事を書いていきます。）そんなデベロッパーツールのユーザーインターフェースに関して、超初心者向けの“見方”をまとめてみたいと思います。
デベロッパーツールとは
デベロッパーツールとは、
Web ページを形作っている HTML や CSS、JavaScript などのコードの調査やデバッグなどを行うことができる Web 開発の手助けをしてくれるツールです。Web ページのコードをブラウザ上でちゃちゃっと編集して、即座に反映させることができます。（テストとして。本番更新ではない。）
主要なブラウザ（Chrome、Firefox、など）には標準搭載されています。「開発者ツール」とか「DevTools」とか呼ばれたりしますが、呼び方の違いなだけで同じものを指していると考えて特に問題ないかと思います。そもそもデベロッパーという単語の意味は開発者なので。もちろんブラウザによって性能の違いはありますが、初心者の段階では特に気にしなくて良いと思います。
また、コードの調査やデバッグだけではなく、「ネットワークトラフィックの監視」、「コンソールの確認」、「パフォーマンスの分析」、「セキュリティの検査」、などなど、デベロッパーツールには他にもいろいろな機能があるようです。難しそうなので、今回は『Web サイトのクオリティアップのためのツールがたくさんある！』という程度にとどめておきます。。
メモ
今回は Chrome のデベロッパーツールを参考にまとめたいと思います。他のブラウザでも大きな違いはないと思うので、まず Chrome のデベロッパーツールをかんたんにでも使えるようになってしまえば、他ブラウザのデベロッパーツールもそれほど労せずして使えるようになるかと思います！
ちなみに Chrome ではデベロッパーツールのことを「DevTools」としているようです。
デベロッパーツールの起動方法
まず起動することができなければはじまらない！ちなみに Chrome のデベロッパーツールはブラウザの標準機能なので、アドオンなどをインストールしなくても使えます！
デベロッパーツールの基本的な起動方法
ブラウザの右上の方にあるテンテンテンのアイコン（ケバブメニュー）をクリックして、「その他のツール」→「デベロッパーツール」という順番でクリックします。
そうすると、デベロッパーツールが起動します。
上の画像だとブラウザのウィンドウ内に展開されましたが、場合によっては下や別ウィンドウで表示されたりするかもしれません。表示方法を変更する場合は、デベロッパーツール内のテンテンテン（ケバブメニュー）から「固定サイド」の横にある任意のアイコンをクリックすることで変更することができます。
また、ブラウザ自体のウィンドウサイズによっても、デベロッパーツールの表示が縦や横になっていたりするので、ウィンドウの端っこをつまんでお好みの表示に変更可能です！
言語が英語だった場合
もしも言語が英語表記で、日本語にしたい場合はデベロッパーツールの歯車アイコンから設定ができます。
歯車アイコンをクリック → 「Language:」で「Japanese – 日本語」を選択 → 「Reload DevTools」をクリック
調べたい要素からデベロッパーツールを起動させる
私は、こちらのやり方をよく使います。調べたいなぁと思った部分を右クリックして、「検証」をクリックします。
すると、デベロッパーツールが表示されます。さらにこのやり方だと調べたい要素の情報でデベロッパーツールが展開されるので、使い勝手もよいです！
ポチっとにゃ！でデベロッパーツールを起動させる
Chrome のデフォルト設定で、
Windows の場合は、「Ctrl + Shift + i」ショートカットキーまたは「F12」ファンクションキー、Mac の場合は「⌘ + Option + i」ショートカットキーを押すことで、デベロッパーツールを起動させることができます。
デベロッパーツールの見方
超初心者はとりあえず
これだけおぼえて！
JavaScript はまだ扱えないよ！HTML と CSS だけでしか Web ページを編集できないよ！という方向けのデベロッパーツールの見方をまとめてみたいと思います。
説明するのにデベロッパーツールの表示方法は“右に固定”で進めていきたいと思います。さらに、見やすくなるようにやや横に広げて見てみます。
「要素（Elements）」パネル（最初の画面）
最初にデベロッパーツールをまず展開したときに、上のタブに「要素」が選択された状態で表示されるかと思います。仮にこのパネルをメインとした場合、サブとして「スタイル」が選択されたパネルが表示されますね。
場合によっては下に「コンソール」や「新機能」などのパネルも表示されますが、これはあとで「Esc」キーから表示することが可能なので、いったん閉じちゃいましょう！
メインのパネルには HTML が表示されており、調べたい要素を選択すると連動して選択された要素の情報がサブのパネルに表示されます。
最初は「スタイル」タブが選択されていますが、ほかにもいろいろなタブがあるので知りたい情報によって使い分けられるようになりましょう！初心者のうちは「スタイル」、「計算済み」、「レイアウト」あたりを使いこなせるようになれば、まずまずといったところでしょうか！
やや横に広げて説明している理由
デベロッパーツールに見慣れない内に、コンパクト（縦）に表示させると「要素」＞「スタイル」の関係が読み取りづらいという理由で、やや横に広げています。
慣れてしまえば、どうってことないんですけどね！
というような感じで、
HTML と CSS だけの Web 制作初心者であれば、まずはこちらの「要素」パネルを最低限見慣れておくとかなり心強いかと思います。
より細かい使い方などは別記事でまとめられたらと思います。
まとめ
デベロッパーツールを使って Web ページの HTML や CSS、JavaScript などを調べることができます。実際に調べたい要素を右クリックして「検証」がおすすめ。調べたい要素の情報が瞬時に展開されます。さらにテストで編集・反映させることもできるので、Web 制作の大きな助けになります！ぜひ使えるようになりたいツールです！
ちょっと敷居の高そうな感じるかもしれませんが、わかってしまえばそんなに難しくはないので、初心者のうちは“見慣れる”というところから入って、抵抗なく自分のものにするのが良いのではないでしょうか！
とくに HTML と CSS のみしか編集できないよ！というような方は、まずは「要素」パネルを見れるようになりましょう！
