cssでサイトを作っていると思ったものと違う結果になること多いです。
こんな時便利なのがChromeのデベロッパーツールです。
今回は、cssでサイトをコーディング中に上手くいかなかった場合利用している私のChromeのデベロッパーツールの利用方法をシェアします。
これを使いこなせると、cssのなぜ上手くいかないんだろう？
は全て解決します。
Chromeのデベロッパーツールを呼び出す
まず、デベロッパーツールを呼び出す方法です。
Chrome上で右クリック
検証を押します。
ショートカットは「Ctrl + Shift + C」（MacはControl + Option + C）です。
すると、こんなものが出てきます。
これは、下にでたり右に出たりします。
cssをやる時の私のおすすめは右です。
位置は右上の「・」が縦に3つ並んだボタンを押すと出現するこのメニューのDock sideで変更できます。
Chromeのデベロッパーツールでなぜcssが上手くいっていないかを探す。
では、上手くいっていない箇所を実際に探してみましょう。
まず、赤く囲ったボタンをクリックします。
そして、webページ上にカーソルを持っていきます。
動かすとなんだかチカチカしますねw
これで、webページの要素を選択できます。
調べたい要素の上でクリックすると
（この例は「文の頭に空白を入れたいと思うこと、」をクリックしています）
クリックした箇所(今回は、「文の頭に空白を入れたいと思うこと、」を含んだ<p>要素)
のcssの情報が取得できます。
さらに、カーソルを詳細情報のcssプロパティーの上に持って行くと
チェックボックスが出現
チェックボックスを押すと、そのcssプロパティーが消えます。
それは、Webサイト上にも反映されます。
margin-top 20pxがなくなったことにより、
文と文との隙間がなくなりました。
この機能を使うことにより、
cssが上手くいかない時にどの要素が邪魔をしているかを突き止められます。
cssをChrome上で追加する
下の画像のここら辺をクリックという場所をクリックすると、
cssをChrome上で追加で入力できます。
すると、margin-top 20pxの下に追加でcssを入力できます。
font-size:30pxを追加しました。
左の文章の文字がでかくなりました。
これで、どのcssを当てれば上手く行くか
Chrome上で確認が可能です。
こうやってサイト制作の際はChromeのデベロッパーツールを使っています。
慣れると相当便利です。
いかがでしたか？ Chromeのデベロッパーツールを使って快適なサイト制作いかがだろうか？