HTML/CSS初心者のコードミスを探せ！googleデベロッパーツールの使い方

初心者さんにあるあるなコードの記載ミス。

あれが足りない、これが足りない、英語の綴りミスで動かない…

コーディングを初めて、1番最初にぶち当たる壁はまずこれです。

お勉強したてほやほやの頭で書くから、どこに何が必要なのかごちゃごちゃになっちゃうんですよね(´･ω･`)

初心者お助け！google developerツール！

そんな時にとっても役立つのがこれ！

Google Chrome Developer Tool

　　－　グーグルクロムデベロッパーツール

f:id:serinaishii:20150903231303p:plain

developerは開発のこと。つまりプログラムを書いて、システムを開発するときの為のツールです。

自分が書いたコードを要素検証して、正しくマークアップできているか、正しくスタイルが反映されているかなどを確認することができます。

ブラウザの準備

今回使う『Google Chrome』はMacにもWindowsにも標準装備されていないブラウザなので、初めてChromeを使う方はダウンロードする必要があります。

標準ブラウザ

Mac： Safari(サファリ)
Windows： Internet Explorer(インターネットエクスプローラー)
IE(アイイー)と略されることが多いです

<a href="https://www.google.co.jp/chrome/browser/desktop/index.html" data-mce-href="https://www.google.co.jp/chrome/browser/desktop/index.html">Chrome ブラウザ</a>www.google.co.jp

特にアドオンなどを別途で入れる必要はありません。DLしたら次へ！

google developerツールの使い方

まずは、デベロッパーツールの起動方法、次に要素検証に使うツールを簡単に説明していきます。

----

1.　起動方法

ツールバーからも起動できますが、『F12』キーを押すのが一番早いかなと思います！ボタン1つなのでぜひ覚えてください。

f:id:serinaishii:20150903231311p:plain

1.　ツールバー

『Google Chromeの設定』(ブラウザ右上の三本線ボタン)
『その他のツール』
『デベロッパーツール』

2.　ショートカットキー

『F12』(ファンクションキーの12)
Windowsの場合：　『Ctrl』+『Shift』+『i』
Macの場合：　『option』+『command』+『i』

3.　右クリック

ブラウザ上で右クリック→『要素を検証』

2.　基本操作

さて、無事にデベロッパーツールが起動できたところで、早速使い方をご紹介しましょう！

f:id:serinaishii:20150903231317p:plain

デベロッパーツール基本操作

デベロッパーツールの左上：　虫メガネボタンをクリック
ブラウザ上：　検証したい要素(オブジェクト)をクリック

基本的な操作はたったのこれだけ！！

すると、デベロッパーツール側で選択したオブジェクトのコードやスタイルが見えるようになります。

コードを確認する場所

HTML：　画面の左側 / Elementsタブ
CSS：　画面の右側 / Stylesタブ

3.　検証方法　－　ボックスモデル

f:id:serinaishii:20150903231323p:plain

検証の仕方

検証したいオブジェクトを選択する
デベロッパーツールのCSS側を下にスクロールする
ボックスモデルが出てくる

個人的に、このボックスモデルの検証は1番よく使います！

サイトのデザインにもよりますが、margin・paddingは見えにくい要素です。･･･ということは、レイアウトミスが起きやすい要素でもあります。

なので、初心者ほどChromeのデベロッパーツールでよく確認しましょう！

コードミスを探せ！

冒頭でもふれたように初心者さんあるあるなスペルミス！！！まさに天敵ですね！

今回はよくあるコードミス2パターンについて書いてみました。

----

1.　綴りミス・スペルミス

さて、デベロッパーツールで自分が書いたコードを確認してみましょう。HTML・CSSともにそれぞれの要素に色がついているのがわかるかと思います。

f:id:serinaishii:20150903231740p:plain

1.　要素名の綴りミス

画像のように『注意マーク』が出る
要素に色がつかない

･･･という現象が起きるので、ひたすらソースとにらめっこするよりもグッと簡単に間違いを見つけることができます。

2.　id名・class名の綴りミス

id名・class名は、人間が任意で決めた名前なので、コンピュータ側は綴りの間違えを認識できません。そんなid名・class名の綴りミスはよくおこしやすいのに探しにくい、とても厄介な子です(;O;)

HTML・CSSの双方でid名・class名の記載が違っているときは、要素検証をしてもCSS側に検証結果が出てきません。

つまり、何か間違えがある為に『スタイルが反映されてない』ということがわかります。綴りが異なっていた場合は、それぞれで違う名前として認識されている、ということですね。

自分で決めたid名・class名はよく間違いやすので、要チェックです！

2.　スタイルの上書き

f:id:serinaishii:20150903231342p:plain

CSS内で同じ要素に対して異なるスタイルを重複して指定した場合、後ろの行にあるスタイルが上書きして反映されます。

h1 {

font-weight: bold; /* フォントを太く */
color: gray; /* 文字色：灰色 */
border-bottom: 1px solid pink; /* 下に1pxのピンク色の線 */
}

h1 {
color: brown; /* 文字色：茶色 */
}

･･･と書いた場合、重複している『color』の要素が上書きされて