うまくいかない！？原因はケアレスミスかも…コーディング時のチェックリスト

2013/02/08

タグの閉じ忘れ・タグの中に改行・スタイルシートの優先順・全角スペースなど、コーディングでよくミスする項目を紹介します！

ぱっと見みた目が変わらないものもリストに入れています。
(htmlバリデータでエラーが出るものです)
直接見た目にかかわるものには★マークをつけています。

HTML編

これです。一番やってはいけないことをやらかしました。
<div>要素を追加したとき、ID、クラス名が変わったとき、
<div>の閉じタグ部分もしっかり注意しましょう。
そんなときに便利なのがこちらの記事で書いた拡張機能です

>>Dreamweaverさんと仲良くなれそうな拡張機能とショートカットのお話
<div>要素の閉じタグコメントでうっかりミスをなくしましょう！

タグとタグの間に改行は問題ないのですが、たとえば

というimgタグの場合、ちょっと長くなっちゃってもとくに！URLの真ん中なんかで改行しちゃダメです！
変に改行を入れると、文字間に謎のスペースが入ってしまいます。

<p>の中に入れてもいいのはテキストとインライン要素のみ。<li>はインライン要素に含まれません。
ブロック要素である<div>も×です。

スタイルシートには優先順位があり、それに基づいてスタイルが適用されます。
優先度をしっかり把握し、きっちりスタイルづけしていきましょう。
優先順については以下の記事をどうぞ！

body {
background-color: #fff29a;
}

というスタイル内の以下の部分(いずれか1つでも)全角スペース(“□”)が入っているとスタイルが適用されません

body □{
background-color:□#fff29a;
}

全角スペースだけでなく、使用しているや記号文字が全角でもうまくいかなくなってしまいます。。

ひとつのスタイル指定ごとの終わりにつける「；」セミコロンが抜けている場合、
その次に書いたスタイルが聞かなくなってしまいます。
(ただし｛｝内の一番最後に書いているものは抜けていても大丈夫)
ちゃんとスタイルを設定してるのにきかない！という場合「；」忘れを疑ってみましょう。

wordpressではphpタグが入りますが、開始「<?php」～終了「?>」と「？」が入ります
これが抜けていたり開始部分「<?php」の「？｝と「php」の間にスペースが入っていても
うまく動作してくれません。

いかがだったでしょうか「えっそんな簡単な所間違えてたの…！？」という失敗ばかりだったでしょうか…(´；へ；｀)
コーディング中、文字が増えてくると意外な見落としが出てきたりします。
最後まで気を抜かず、丁寧なコーディングを心がけたいですね！