Chromeの検証ツール（デベロッパーツール）を使用して、試験的にWebサイトのHTML・CSSを変更する方法を解説します。
とっても便利なChromeの検証ツール（デベロッパーツール）
Chromeの検証ツール（デベロッパーツール）を利用すると、WebサイトのHTMLファイルやCSSファイルを編集することなく、ブラウザ上で変更後のWebサイトを確認することができます。
画像イメージの方がわかりやすいですね。
上の画像はこのブログのメインビジュアルです。
たとえば、このブログのサイトタイトルを変更してみようかなと考えたとします。
通常のWebサイトの場合には、HTMLファイルをテキストエディタなどで編集し、その後ファイルをアップロードして、はじめてタイトルの変更が確認できます。
※通常はテキストエディタ内でアップロード前にプレビュー確認をします。
※本サイトはワードプレスです。ワードプレスの場合には、タイトル変更の際にHTMLファイルの編集が不要です。
ですが、Chromeの検証ツール（デベロッパーツール）を使用すれば、その場でパパっとイメージの確認ができてしまいます。
こんなかんじです。
作業時間にして、5秒くらいです。
あくまでもブラウザ上（検証ツール上）での変更なので、Webサイト自体は何も変更されませんが、検証ツール（デベロッパーツール）などで事前にイメージなどを確認することで、HTMLやCSSファイルを編集してアップロードした後に、「イメージと違う」というようなことを避けられますし、デザイナーなどに依頼を出す際なども、よりイメージが伝わりやすくなります。
それでは実際に使用方法の解説です。
具体的な使用方法
Chromeでイメージを変更したいWebサイトを開きます。
→右クリック＞検証をクリックです。
ショートカットキー【Ctrl＋Shiht＋I】でもいけます。
こんな画面が出ると思います。
基本的にはこの画面内（上記画面青枠「Elements」）でHTML・CSSを編集します。
※検証ツールをどのように開くかを下の設定で変更できます。
別ウインドウ・左側・下側・右側
HTMLの変更
テキストを変更したい場合は、上の画面の青枠の部分をクリック（青色になります）します。
→テキストが変更できます。
検証ツール（デベロッパーツール）上の変更は、あくまでも検証ツール（デベロッパーツール）上の変更なので、間違えた場合でも何も問題ないです。
元の状態に戻したい時には、Webサイトを開いている画面を再読み込みすれば検証ツール（デベロッパーツール）上の変更点も元通りになります。
CSSの変更
CSSの場合も基本的にはHTMLと同じです。
ただ、見る場所が異なるだけです。
開く画面自体は同じで、HTMLの編集場所の右側にあります。
目印は上記画像青枠の「Style」です。
→HTMLと同じ操作で、色などを変更したい部分をクリックします。
試しに上記画面（body内）の文字の色）を変更してみます。
「#333」の部分をクリックして消去して、変更希望のカラーコードを入れます。
試しに「#ff0047」にしてみましょう。
変更できました。このブログのイメージには合わないですね。
この要領で、フォントサイズなど、様々な変更が可能です。
Googleアナリティクスの動作確認
Googleアナリティクスを使用する際にも、chrome検証ツール（デベロッパーツール）は利用できます。
たとえばWebサイトにGoogleアナリティクスのイベント設定を行いたいとします。
※Googleアナリティクスのイベント設定では、リンクのクリックなどの計測が可能です。
この場合HTMLファイルを編集してGoogleアナリティクスの指定コードを入れる必要があるのですが、通常の方法（HTMLファイル編集→アップロード→アナリティクス上での計測確認）で行うと、万が一挿入コードが間違っていた場合二度手間三度手間になってしまいます。
そこで、実際にHTMLファイルを編集する前に、きちんとGoogleアナリティクス上でイベントクリックが動作するかを、Chromeの検証ツール（デベロッパーツール）上で確認します。
使用するのは、以下2つです。
- chrome検証ツール（デベロッパーツール）
- Googleアナリティクスのリアルタイム機能です。
HTMLテキスト編集と同様の要領で、イベント計測をしたい箇所をクリック→HTMLコードにイベント用のコードを入れます。
実際にWebサイト上で、該当の箇所をクリック等します。
Googleアナリティクスの「リアルタイム＞イベント」上で、計測確認をします。
問題なく計測されている場合には、実際にHTMLファイル編集→アップロードで完了です。
画像解説です。
試しに記事のリンクにイベント設定をします。
※該当記事のタイトル（リンク）がクリックされた場合に、カウントされる設定。
こんなかんじでイベント設定用のコードを入れてみます。
コードは以下記事から持ってきています。
コードを追加後、タイトルをクリックしてみます。
これで、実際にHTMLファイルを編集する前に、計測が問題なくできることが確認できました。
まとめ
以上がChromeの検証ツール（デベロッパーツール）の使用方法です。
紹介した内容はほんの一部で、私自身知らない機能含め、たくさんのことができます。色々な機能を試して、ぜひ効率的に仕事を進めてくださいね。
それでは、お読みいただきありがとうございました。
