ブラウザ付属の開発者ツール使い方 | Hello, Stupid World!

Hello, Stupid World!

いろいろとメモ代わりに書いていきます。

開発者ツールについて説明します。


Hello, Stupid World!-ツール1


この一番左下にあるボタンを押すと

Hello, Stupid World!-ツール2


開発者ツールがウィンドウ化されます。

Hello, Stupid World!-ツール3


次にその横のボタン。

Hello, Stupid World!-ツール4


これを押すと画面から選択できる状態になり、選択すると

Hello, Stupid World!-ツール5


Elementsタグ内で選択した項目に該当する部分がフォーカスされます。

Hello, Stupid World!-ツール6


このElementsタグ内では値を書き換える事もできます。

Hello, Stupid World!-ツール7


書き換えた結果は即座に画面に反映されます。

Hello, Stupid World!-ツール8


また、Stylesが開いていれば選択したものに該当するスタイルが
表示されます。

Hello, Stupid World!-ツール9


こちらも同様に書き換えることで

Hello, Stupid World!-ツール10


即座に反映され表示されます。

Hello, Stupid World!-ツール11


画面レイアウトの調整時に大変便利です。
今回はGoogle Chromeで説明しましたが同様の機能が
IE,FireFox,Operaなどでも存在します。