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

どうも！はじめまして！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を選びます。

するとdeveloper toolがElementsからSourcesへと移行します。この画面は主にCSSとJavascriptが編集出来ます。
真ん中の画面では先程選択したinspector-stylesheetが表示されており、こちらでもcssの編集が可能です。

保存は右クリックメニューからsave as…を選択して保存したいフォルダに保存してください。これで編集したCSSが反映されます。

以上です。これでよくfloatのカラム落ちなどを編集してたりします。CSS編としたのはJavascriptなどの処理や表示速度なども調べることが出来るそうなのでjQueryなどを実装した際に試して、またjavascript編として記事にしたいと思います。

という事で次回はjQueryを記事にしたいと思います！

Tweet

Check

[`evernote` not found]