F12 開発者ツール（デベロッパーツール）の使い方
F12キーは、webデザイナーなら毎日使うといっていいほど便利なキーです。
web制作会社にいた時には、デバックといっていました。
デバックという意味は、「プログラムのバグを取り除く作業のこと」
なので使い方が違うような気もしますが、そう教わりました。
初めは、何がいいのかよくわからず使っていましたが、
慣れてくるとwebサイト作成時に大変重宝する機能でした。
その使い方はというと、まず何でもいいのでサイトにアクセス！
といいたいところですが、yahooとかのページでF12を押しても、なんのこっちゃわかりづらいので、
簡単なサイトで試すとわかりやすいと思います。
参考サイトを表示して、そこでF12を押すとこんな画面になります。
これでもいいのですが、私は下にコードがあった方が見やすいので、
右上の縦に・・・のところをクリックして、
コードを画面の下に表示します。
すると下のようなります。
それから、左真ん中下にある、矢印をクリックして、
次に、社長のメッセージのところをクリックすると、
注目と書いた部分を見ると、#main h2 何々と書いてあるのがわかる。
この部分がこのサイトで使われているCSSで、そのCSSの左側の
青い長い線が出ている領域がHTMLが書かれている部分である。
ナビゲーションメニューのホームや事業内容などの部分もクリックすると
左下の注目のところにその箇所で使われている、CSSが表示される。
これを使えば、サイトのHTMLとCSSがすべてわかるので、
同じサイトを作ることもできる。
利用上の注意点
ただ、JavaScript（ジャバスクリプト）やPHP、WordPressなどで作られているサイトについては、
HTMLの部分が、実際のものとは違うので、CSSだけを参考にした方がいい。
主にサイトのCSSがどうなっているのか、知りたいときに利用するツールである。