遊びまくる!

アラサー無職のカオスな日記

F12 開発者ツール(デベロッパーツール)の使い方

f:id:hamaren:20160611220129j:plain

F12キーは、webデザイナーなら毎日使うといっていいほど便利なキーです。

web制作会社にいた時には、デバックといっていました。

デバックという意味は、「プログラムのバグを取り除く作業のこと」

なので使い方が違うような気もしますが、そう教わりました。

初めは、何がいいのかよくわからず使っていましたが、

慣れてくるとwebサイト作成時に大変重宝する機能でした。

その使い方はというと、まず何でもいいのでサイトにアクセス!

といいたいところですが、yahooとかのページでF12を押しても、なんのこっちゃわかりづらいので、

簡単なサイトで試すとわかりやすいと思います。

参考サイトを表示して、そこでF12を押すとこんな画面になります。

htjkkik

これでもいいのですが、私は下にコードがあった方が見やすいので、

右上の縦に・・・のところをクリックして、

コードを画面の下に表示します。

iiuii

すると下のようなります。

dddd2

それから、左真ん中下にある、矢印をクリックして、

dddd3

次に、社長のメッセージのところをクリックすると、

dddd5

注目と書いた部分を見ると、#main h2 何々と書いてあるのがわかる。

この部分がこのサイトで使われているCSSで、そのCSSの左側の

青い長い線が出ている領域がHTMLが書かれている部分である。

ナビゲーションメニューのホームや事業内容などの部分もクリックすると

左下の注目のところにその箇所で使われている、CSSが表示される。

これを使えば、サイトのHTMLとCSSがすべてわかるので、

同じサイトを作ることもできる。

利用上の注意点

ただ、JavaScript(ジャバスクリプト)やPHP、WordPressなどで作られているサイトについては、

HTMLの部分が、実際のものとは違うので、CSSだけを参考にした方がいい。

主にサイトのCSSがどうなっているのか、知りたいときに利用するツールである。