Google chrome developer toolsの簡単な使い方【CSS編】

2014/07/30 0 comments Article 開発環境

どうも！はじめまして！7月1日にGEEKの一員となりました。井原です。
初めて実務でコーディングするのでまだ技術的な話は出来ませんが今後身につけていきたいです。宜しくお願いします。

今日は僕がよく使っているchromeのdeveloper toolsを紹介します。
developer toolはhtml,cssの編集やjavascriptの動作確認、通信速度などを検証できるツールです。
今回はcssの編集とその保存方法について説明したいと思います。

まずはgoogle chromeでサイトを開きましょう。
developer toolsの起動方法はキーボードのF12を押すか、知りたい要素を選択して右クリック＞要素の検証を押しましょう。

今ツールの中のElementsにいます。左側がhtmlを表し、右側が今選択されているタグにかかっているCSSです。F12で開いた人でこの画面になっていない人はElementsボタンを押してみてください。
Elements画面では主にHTMLやCSSの動作をいろいろ試すことが出来ます。

左上にある虫眼鏡のアイコンをクリックして画面の編集したい要素にマウスオーバーするとその要素のpaddingやmarginなども調べることができ、クリックすることでその要素が選択され下のツールボックスで選択された要素に関わるタブが全て展開されます。これを使って「chrome developer toolsの簡単な使い方」をクリックします。
するとツールの左画面で現在選択している要素がbody>header>h1とわかります。そして右側ではそのh1にかかっているCSSが分かります。

マウスカーソルを右側のボックスに合わせるとプロパティにチェックボックスが表示されます。そのチェックボックスのチェックを外すとそのプロパティがコメントアウトされ反映されなくなります。

font-sizeのチェックボックスのチェックを外しました。画面内のh1のサイズが変わったのが分かるかと思います。
このまま新しいプロパティを加える事もできますが、このセレクタにプロパティを追加すると並列しているh2や、ｐなどに影響がでそうです。なので今回は新しくセレクタを追加しましょう。
右上にある＋ボタンをクリックしてください。すると、現在選択されている要素を編集出来ます。

新しくdisplay,border,paddingを追加しました。h1要素がボーダーに囲まれているのが分かるかと思います。
現在編集しているボックスの右側にinspector-stylesheet:1とありますが、これは今新しく作った架空のcssファイルで、コロンの右側の数字はそのセレクタがある行数を表します。
なのでそのすぐ下のbase.css:6はbace.cssの6行目のセレクタという意味になります。

先程、架空のCSSファイルと言いましたが、実は今編集した情報はページを更新すると消えてしまいます。これはデベロッパーツールが実際のファイルを編集しているわけではないからです。

ですからコチラの編集を確定させるためにCSSを保存したいと思います。右側のboxの保存したいCSSをクリックしてください。ここではinspector-stylesheet:1を選びます。