Chromeのデベロッパーツールを使えば、簡単にいろいろなウェブのチェックができる！

こんにちは。フローラです。夏休みの予定や帰省などで忙しくなるお盆。
皆様、夏のご予定は決まりましたでしょうか。もちろんずっとお仕事って方もいらっしゃるでしょう。
長いお休みの前、お仕事もキリの良いところまでしっかり片付けておきたいですね。
そういう時に限ってレイアウトが崩れたり、思うようにCSSが当たらず（私だけ？お恥ずかしいです・・・）。
そんな時にはChromeの検証機能を使ってチャッチャと仕事を片付けてしまいましょうね。

Chromeのデベロッパーツールとは？

Chromeブラウザの標準です。 WindowsだとF12で表示されます。

Chromeのデベロッパーツールでどんなことができるの？

WEBページのhtmlやcssの状態確認、テスト
WEBページ内のエラーチェック
スマホ等他メディアの表示チェック

等々機能は多彩です。
今回は基本的な操作についての解説をしてみたいと思います。
実際のhtmlやcssのファイルの内容を変えずに修正結果を確認しながら作業ができるので、問題のある部分が簡単に特定できてとても便利です。早速使い方を見ていきましょう！

Chromeのデベロッパーツールの基本的な使い方

デベロッパーツールを表示させてください。WindowsだとF12で表示されます。
今日使う機能です！

画面左側が実際のブラウザ表示です。
右側がデベロッパーツール部分になります。
左側上部の「Elements」を押しElementsパネルを開きサブパネル「style」パネルも開きます。
htmlとCSSが表示されます。

要素を選択する

デベロッパーツールに要素の選択ボタンがあります（上記画像の緑丸で囲ったボタンです）。
要素の選択ボタンを押し、画面左側の画面表示の方で目的の要素をクリックすると、Elementsパネルも選択されます。
要素の選択はショートカットキーCtrl＋Shift+Cでも出来ます。

要素を編集する・無効にする・追加する

選択後、Elementsパネルを右クリックし、「Edit as html」を選択すると実際のhtmlファイルを変更することなく、ファイル変更のテストを行うことができます。
また、サブパネルのstyleパネルは選択した要素で使われているCSSソースが表示されます。
マウスオーバーするとチェックボックスが表示され、このチェックを外すことでCSSを一時的に無効にすることができます。
右上にあるプラスボタンの「New Style Rule」で対象のCSSファイルを選択し新しいルールを追加することもできます。