こんにちは、ミツイです。
cssを組む時にchromeの検証は必要不可欠ですよね。
ゴーリストではデザインチームがコーディングまで行うことが多いので、chromeのDevTools（検証）にはお世話になりっぱなしです。
下手したらillustratorとかSketchとかよりも使ってるツールですが、その実、使われ方が共有されていなかったりするので、僕なりの使い方を書いておこうと思います。
要素の検証ざっくり紹介
まずは、DevToolsの基本的な使い方から。
呼び出し方は大きく分けて、
・右クリック→検証
・cmd + Option + c（cmd + Option + iでも出ますが、cの方がハイライトする場所を選択できるので便利です）
の２種類があります。
どちらからでも良いので、とりあえず開いてみましょう。
Elements・Console・Sources・Network・Timeline・Profiles・Application・Securityのモードがあります。
今回見てほしいのはElementsパネルだけです。
Elementsパネルをざっくり言うと、左がHTML（DOM Tree）で右がcss、です。
cssの部分（Styles pane）は、Styles・Computed・EventListeners・DOM Breakpoints・Properties・Accessibilityのタブがありますが、今回見てほしいのはStylesタブだけ！
DOM treeで要素を探す
・実際のページの検証したい部分をもう一回右クリック→検証
・cmd + Option + c（もしくはcmd + Shift + c。何でショートカットがどちらもOKになってるんでしょうかね。。）
で実際の画面上で選択部分が色付きになります。
青が本体、緑はパディング、オレンジがマージンです。
実際の画面上にtootltipの形で縦横のサイズが表示されます。これもよく使いますね。
imgタグのsrcの値をホバーすると表示画像サイズと元のサイズが表示されます。これも、助かる。
画像のurlを知りたいけど、imgタグがない！
cssのbackground（background-image）に書いてあることが多々あります。
画像の縦横比が変則的でbackground-size:containかcover を使いたい時などにありがち。
階層多すぎて、次の要素を探すの大変。。
適度に閉じた方が構造含めて見やすいですよ。
フッター部分にある階層をクリックして、必要な階層に移動するのも使えます。
Styles paneを見る。上から順に。
セレクタ {
プロパティ: 値;
}
がバババッと並んでますが、上にあるものが強いセレクタです。
※セレクタには強さってものがありまして、基本的にはどれだけ詳細に書かれているかってことになります。
詳しくは下記ページがわかりやすいです。
『CSSセレクタの優先度を手軽に計算して比較できるツール「Specificity Calculator」 』
https://nelog.jp/specificity-calculator
同じ要素に対して同じプロパティの指定があった場合、Style pane上で上に書いてあるスタイルの方が効くってことです（基本は）。
負けている“プロパティ：値”は、打ち消し線がついてます。
なお、セレクタで勝ってても、!importantで負ける場合もあるので、一番上にあるからと言って油断はできません。
また、継承されるタイプのスタイルは打ち消し線で消されていても反映されている場合があるので、こちらも合わせて注意です。
該当のcssが書いてない。
右クリックやセレクトモードを使ってページの該当部分を選択しても、書いたはずのセレクタが見つからないなんてことがあります。
・選択されているDOMの子供（か子孫）に書いてある。
・選択されているDOMの親（か祖先）に書いてある。
・選択されているDOMのbefore要素・after要素に書いてある。
・javascriptを使ってインラインスタイル（HTML上にstyle=""で書くスタイル指定）に吐き出されるようにしてある。
他のスタイル指定に打ち消されている。。
【対処法→】セレクタを強く書き換える。上の記事を読みつつ、子孫セレクタを使ったり、複数クラスにしたり。!importantは基本的に使わないでください。未来の自分や同僚のために。
ライブラリのcssに負けている（ことごとく）。。
【対処法→】cssを読み込む順番を変える。カスタムスタイルシートは後で読み込みます。cssは後勝ちなので。
いや、あるんですよ。意外と。wordpressとかで特に。
セレクタの強さが無茶苦茶になってきてて、!importantが連発してある。。
【対処法→】classの命名規則を考え直したほうが良いですね。静的ページならBEM、SMACSS、OOCSS等を使って書く。Angularやreact等ならcssのカプセル化をするのがオススメです。
そもそも書いたはずのセレクタがない。。
【対処法→】Style paneに書いたはずのセレクタがない。下の方まで見たけど見当たらない。。。
原因は様々です。頑張って原因を探ります。よくあるのは、
・セレクタが間違ってしまっている。間違った子孫セレクタの書き方等（scssで書いてるとありがち）。
・そもそも、該当するスタイルが書かれているcssが読まれていない。リンク切れ。（ローカルで作業しているのにcssファイルだけ本番ファイルを見ていたなんてことも）
・cssのセミコロンやコロンの閉じ忘れ。（cssファイルの一番上に書いたら効くのに下の方に書くと効かない、何ていうのはこの可能性ありです）。
・media queryで違うディスプレイサイズを指定していた（その辺り一帯が実はモバイル用のcssになっていたり。。そのためにも、media queryはごそっと書くんではなくこまめに書くのをおすすめします。）
・カプセル化の影響で効かない（Angularとかでありがち）。
・ブラウザのキャッシュが残っているだけ（スーパーリロードは、cmd + shift + r）。
書いたはずのセレクタが見つからないとDevToolsは使いものになりません。
とりあえずstyle paneに出るように修正していってください。
cssを直す
style paneに目的のセレクタがあったら、DevTools上で編集していきます。
プロパティ名、値の部分をクリックするとそれぞれ編集状態になるので修正します。
サジェスト機能があるので、基本的にはそれを使っていきましょう（スペルミスで効かないという無駄時間をなくすため）。
色指定の左にある■をクリックすると
こんなのが出てきて、
直感的に色の変更をできるので便利です。
あと、各セレクタの右に書いてあるファイル名と行数は非常に便利です。 sass（scss）だと、セレクタを検索しても出てこなかったりするのでこれがないと結構困ります。
（ネストしている場合はその塊の先頭行までしかわからないのがたまに傷ですが。。ちなみにAtomでは ctrl + g で指定した行へ移動できます。）
まとめ
表示崩れをcssファイルだけ見て直すとか、0から作る時にcssファイルだけ見て書くとか、今ではもう考えられないです。
できるなら、DevToolsで完結したいくらい。（Atomのプラグインでそういうのありそうですね。なかったら、作れないかしらん）
もしまだ使ったことがないという方いましたら、今すぐcmd + option + c で検証してみてください。
もちろんDevToolsはcssコーディング以外にも活躍するので、機会があればそれらについても書いてみたいと思います。
ではまた！
