読者です 読者をやめる 読者になる 読者になる

webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

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

webサイト制作 便利ツール / 拡張機能

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

 
あれが足りない、これが足りない、英語の綴りミスで動かない…
 
コーディングを初めて、1番最初にぶち当たる壁はまずこれです。
 
お勉強したてほやほやの頭で書くから、どこに何が必要なのかごちゃごちゃになっちゃうんですよね(´・ω・`)

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

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

Google Chrome Developer Tool

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

f:id:serinaishii:20150903231303p:plain

 
developerは開発のこと。つまりプログラムを書いて、システムを開発するときの為のツールです。
 
自分が書いたコードを要素検証して、正しくマークアップできているか、正しくスタイルが反映されているかなどを確認することができます。

ブラウザの準備

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

標準ブラウザ

 

www.google.co.jp

 

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


google developerツールの使い方

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

 

----

1. 起動方法

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

 

f:id:serinaishii:20150903231311p:plain

 

1. ツールバー

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

 

2. ショートカットキー

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

 

3. 右クリック

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

2. 基本操作

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

 

f:id:serinaishii:20150903231317p:plain

 

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

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

 

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

 

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

 

コードを確認する場所

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

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

f:id:serinaishii:20150903231323p:plain

 

検証の仕方

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

 

個人的に、このボックスモデルの検証は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』の要素が上書きされて

 

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

 

というスタイルがh1に反映されることになります。

 

沢山コードを書いているとついつい重複指定してしまうことがあります。

 

こんな時もデベロッパツールで確認すると、どのスタイルが適用されていて、どのスタイルが上書きされているのか一目瞭然です!!


お役に立ちましたか? 

 

厄介なコードミス、されど避けては通れないコードミス。

 

通過儀礼ならせめて簡単に解決して、ササッと前に進める術を身に着けておきたいものですね!

広告を非表示にする