パソコンのキーボード上の「f12」ボタンを押すことでデベロッパーツールを起動することができます。
パソコンの種類や、設定によっては「fn」＋「f12」の場合もございます。
これらはファンクションキーと呼びます。
functionは「機能」という意味を持ちますので、便利な機能のショートカットというボタンです。
これらはf1からf12まで存在し、今回はf12の使い方について紹介します。
f12 : デベロッパーツール
このデベロッパーツールは何をするのか。
developは「開発」なのでdeveloperは「開発者」のツール「道具や機能」なので、開発者向けの機能ということです。
では一体何をするの詳しく説明します。
この機能はWEBページで使用します。
ChromeやEdgeなど、どのブラウザを使用しても基本的に操作もできることも同じです。
そしてこのブラウザで開いてるもの。
つまり、このページや、ニュースサイト、検索して得られるページはすべてhtmlというプログラミング言語でできています。
（厳密にはhtmlはプログラミング言語ではなくマークアップ言語ですが、割愛）
javaやphpというプログラミング言語で構成している場合もありますが、基本的にはの要素を使用しています。
この記事を読んでいる人ならある程度の知識は有していると思いますので、htmlとは？などの基礎は割愛します。
基礎がまだ学べていない人は、安心してください。
必要最低限をまとめていますので、以下からお読みください。
f12 できること。
できることというのは、今見ているページや、その細部がどのように構成されているかを、見ることができます。
また、デベロッパーツールで文字や、CSSを書き換えることによって、WEBページをカスタマイズすることができます。
例えば、「こんにちは」と書かれている部分を「こんばんは」に書き換えると、WEBページも「こんばんは」に変わります。
それって大丈夫？
ご安心ください。
ここでいくら書き換えても、それらは保存されることはないので、元のデータが変わってしまうこともないので、他人にも自分にも誰にも迷惑をかけることはございません。
使い時1 : WordPress
皆さんにとって一番の使い時はやはり、Wordpress使用時です。
WordPressには様々なテーマがあり、そのテーマを選択すると自動でカスタマイズしてくれます。
とてもたくさんの種類があり、選んだテーマの中でもまた、色の変更やサイズの変更など、カスタマイズすることができます。
しかし、赤色か青色か選べたとしても、「赤」というのはおそらく一種類の赤色です。
濃いい赤や薄い赤など細かな設定はできません。
また、デフォルトのままカスタマイズできない箇所もございます。
そのような細かな設定をするために「追加CSS」という枠がもうけられています。
これは好きにカスタマイズしてもいいよという場所です。
ここでカスタマイズするためには、CSSを記述しなければいけません。
その際にデベロッパーツールが役に立つわけです。
cssでどこかの要素を指定してカスタマイズするには、htmlのタグ名もしくはid名、class名がないと指定できませんね。
このidやclass名を見つけるためにデベロッパーツールを使用します。
使い時2 : 仕事
あまりこれを読んでいる皆様には使い時はないと思いますが、ほかの言語で業務やアプリ制作などをしていると、WEBページのある部分を取得し、反映する。
などの工程があります。この際に上記のようにid名などを取得する際に使います。
結局は似たようなものです。
使い方
デベロッパーツールではたくさんのことができますが、今回は、wordpress使用時に役立つ部分を抜粋します。では、
f12を押してみましょう。
パソコンの種類や設定によっては「fn」＋「f12」の場合もあります。
開くと右側に何かひょこっと現れたと思います。
英数字がずらーっと並んでいますね。
これがそのページを構成するhtmlです。
上部にはElements中部にはStyleと書かれていますでしょうか。
ブラウザによって配置が少し違う可能性がありますが、基本的に開いてそのままの画面でOKです。
この画面つまり、「Elements」と「Style」を使用します。
次に、デベロッパーツールの右上の矢印マークを押してみましょう。
押したら、左画面（もとのWEBページ）の任意の場所をクリックしましょう。
どこでもOKです。すると右画面が少し変わりました。
html部分ではクリックした場所のhtmlまでジャンプしました。
cssも同様にクリックした場所の詳細が書かれています。
html部分を見てidやclassがあるか確認します。
次にcssを見ると、どのような値が設定されているか確認できます。
この情報をもとに追加cssに変更を加えることができます。
試しにcssの中身を変えてみてください。
何に変えるかわからなければ、数字を２０倍にしてみるとかでもよいでしょう。
すると左のページが変化しましたね。
このようにテストを行うこともできます。
デベロッパーツールでできること。
大きく５つに分けられます。
DOMの確認や編集をすることができます。
ＷＥＢページがどのように構成されているかのhtmlを確認できます。
（html以外の可能性有）また、Styleの確認や編集もできます。
CSSにあたる部分です。
JavaScriptの実行や、エラーの確認ができます。
通信内容や通信に関することが確認できます。
デバッガーが確認できます。
CoolieやWebStorageの確認や編集ができます。
まだ機能はありますが、よくつ使う機能というのはこれら５つかと思います。
中でも本当によく使うのは、Elementsでhtmlやcssの確認や編集です。
これらを以下で紹介していきます。
