Google Chromeのデベロッパーツールの使い方が知りたい！
どういうときに使うの？使ってなにがいいの？
初心者でもわかるように教えてください！
Web制作をする人だけでなく、ブログをやっている人もデザインの変更はよくするもの。
あなたの使っているPCやスマホでなら綺麗に表示できているけれど、他の人のPCやスマホできれいに表示できているかと言われればそうではありません。
実際に色々な人のブログを見ましたが、実際にレイアウトが崩れている人がちらほらいました。
そんなデザインを検証するのにもってこいなのがデベロッパーツール。
デベロッパーツールなしにはWebデザインなんて到底できません！
今回は、よりよいデザインを目指すためにデベロッパーツールの使い方について紹介します。
Chromeデベロッパーツールの基本的な使い方
デベロッパーツールってそもそもなんだよ！という方のために、実際に使ってみることをお勧めします！
まず、Chromeでデベロッパーツールを起動させてみましょう。
（Chromeでなくても一部ブラウザでならできます）
適当なWeb画面で、右クリック→検証をクリック
すると以下のような難しそうな画面になります。
この画面で、検証をクリックしたサイトのHTMLとCSSを見ることができます。
ctrl＋shift＋iやF12キーでも開くことができます！
それを駆使することで、「なぜデザインが崩れたのか」「こんな色にしたらどんな見た目になるだろうか」「PCではなくスマホではどう見えているだろうか」等が分かります。
デベロッパーツールの使い方【CSSを詳しく見る】
特定要素のCSSを見るためには、以下のように使います。
例として、pタグを赤字にした場合にどうなるのか？を確認してみます。
右上にある矢印アイコンをクリックすることで、Web上の要素を詳しく見ていくことができます。
CSSの最後の部分の「；」の右側をクリックすることで新しくCSSを追加できます。
追加した瞬間に、実際に画面がどうなるか？を見ることができるので、CSSの細かい数値調整にもってこいです！
また、すでに設定されているCSSを変更したり、チェックボックスをクリックでCSSの適用を切り替えることも可能です。
このようにして、様々なブログパーツの色を自分のサイトに合うように考えることが可能です。
もちろん、ページをリロード(更新)することで元通りになります。
CSSが反映されないときの表示
CSSを見ていくと、画像のようになっているCSSの場所があります。
オレンジ色の矢印の部分は、なんらかの理由でそのCSSが適用されていないということ。
棒線がひかれていて、無効化されています。
その要素に反映されているCSSが複数あり、優先順位の高いものに邪魔されている場合がほとんどです。
水色の矢印の部分は、単純にエラー。これも反映されていません。
例として挙げた画像はスペルミス(marginではなくmaginになっている)が原因でエラーになっています。
このようにスペルミスや、思わぬ部分でのCSSの重なりで思った通りのデザインになっていない場合がありますので、見直しましょう。
デベロッパーツールの使い方【hoverした時の結果を確認】
デベロッパーツールを使用している場合、hoverした時の状況はうまく見ることができません。
CSSの詳細が見れるモードでマウスホバーしても、見た目は変わらずの状態です。
hoverした状態を確認するには、hoverさせたときの状況を見たい要素を選択した状態で、:hovをクリックして、:hoverにチェックを入れると確認可能です。
ホバーさせる要素の選択も重要で、実際にhoverしたときの挙動を書いた要素について選択しましょう。
以下の例だと、.blog-card:hover { … とCSSは書いたので、class名がblog-cardのdivタグを選択した状態で見ています。
上記画像の、記事内のブログカードがhoverした状態を見ることができました。(影がついています。)
そして、CSSも.blog-card:hoverとなっているので、ここをいじって調節することも可能。
デベロッパーツールの使い方【HTMLを編集する】
CSSだけでなく、HTMLも編集可能です。
CSSの編集方法で説明したやり方で要素を選択し、右クリック。
その後、Edit as HTMLをクリックすることでHTMLも自由に書き換えることができます。
単純に文字（ブラウザに表示中の内容）を書き換えてみるだけでなく、CSSでどうにもならない場合にはHTML構造の変更を考えてみることも必要です。
個人的には、文字が何文字も増えてもデザインが崩れないか？を見るときによく使います。
他にも、文字の位置がおかしいけど、タグを変えてみたらどうだろう？
という場合に使用します。
spanタグはmarginを指定しても動かないけど、divタグに変更したらちゃんと動いた。という感じ。
デベロッパーツールを使用してレスポンシブデザインを確認
最後に、デベロッパーツールを使用したレスポンシブデザイン対応の確認方法です。
以下の画像の順番にクリックしていくことで、画面の幅を自由に変更することができます。
①の部分をクリックすると、デバイス別のサイトが表示されます。
②の部分をクリックすると、幅が変わります。画像では、Mobile Lのサイズですね。
私の持っていたスマホは意外にもMobile Mより小さいサイズでしたので、できるだけ小さいところ（幅300pxくらい）まで見ていくようにしましょう！
ブログとかだと最低でもトップページとどこか1記事(タイトルや見出しの文字数が多いものが崩れやすい)は確認するようにすべきですね。
デベロッパーツールを駆使してデザインに気を使おう
サイトのデザインを思った通りにしていくには、試行錯誤することになります。
その中で、毎回コードを書いて確認していたらきりがありません。
デベロッパーツールを使用して、『このCSSを当てたらどう変わるかな？』という考え方で1つずつ進めていくのがオススメです。
というわけで、Webデザインを変更するためにはデベロッパーツールの使い方は必須になります。
是非この記事に書いてあることをマスターして、使いこなせるようにしましょう！
