カラーミーショップをご自身でいじってらっしゃる方で、ご存じないようでしたら、ぜひおススメしたい！
ということで、今回はデベロッパーツールの話題をとりあげます。
0. デベロッパーツールとは？
Web制作中に意図しないデザインずれが生じて、原因究明に手間どることがよくありますが、そういう場合にデベロッパーツールはいろいろと役に立ちます（解決のヒントが得られる場合や、直感的なデバッグにも）。
デベロッパーツール（Chrome）、開発者ツール（IE）、インスペクタ・Firebug（Firefox）と呼び名は違いますが、各ブラウザに標準搭載されています。
Chromeのデベロッパーツールが一番多機能だと思います。
主に、不具合の調査に使うというイメージでよいと思います（その他機能も多いですが）。
検索すれば、解説記事はいくつでも見つかりますが、デベロッパーツールの機能が豊富すぎてか、少々敷居が高く感じられることがあります。
ということで、一分くらいで読める導入記事を書いてみました。
初めての方へのとっかかりとして、必要最低限のポイントに絞っています。
1. 一分で読めるデベロッパーツール入門
ツール起動：Windows「F12」、Mac「Command+Option+I」
起動後の全体は下のような感じ。右エリアにコード、スタイルなどが表示されます。
使用する右部分を拡大して、よく使うところに赤枠で目印をつけました（下画像）。
・上の赤枠（左から順に）
調査する要素を指定するカーソル（カーソルもっていくと要素まわりが確認できます）
まずこれを押してから調査です。
デバイスツール（デバイスごとの表示サイズを選べます＝RWDの表示テストに使ったり）
Elementsパネル（HTML要素などが表示されます＝一番よくみる場所）
HTMLタグをためしに追加したり、消したり。
Consoleパネル（エラーログが出ます＝JavaScriptを書いたときに便利）
・下の赤枠
Stylesは、カーソルで指定した要素の適用されているスタイルシートの内容が確認できます。
効いているスタイルを確認したり、ためしに追加したり、数値を変えたり、消したり（チェックボックスのオフ）。
スタイルに起因するデザインずれなどを見つける、超重要ポイント。
ためしてみるということが、デベロッパーツール上だとパパッと済んじゃいます。
適当にカーソルを当てて、クリック、ダブルクリック、Delキーなんかを押せば、思ったとおりに反応してくれます。なんとなくで使えます。
初めて使うのでしたら、必要な機能はこんなところです。
2. もう少し知りたい方は、他の方の記事を読んで
メリット、使い道、使い方について、丁寧に説明されています。
Webデザイナーのためのデベロッパーツール入門
3. おわりに
デベロッパーツールが使えるようになったんだけど、あいかわらず原因がわからず、はまるんだけどって話もよく聞きます。
デバッグの仕方・手順・考え方は重要な技術のわりに、話題としてあまり見かけません。経験が大きく物を言う部分だからかもしれません。
