• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2013/02/08

書いた人:
yukappa!(INO)
カテゴリ:
CSS   HTML   Web制作
18,282 views

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

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


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

HTML編

①★<div>の閉じ忘れやうっかり削除してしまっていた…

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

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

②タグの中に改行が入っていた

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

<img src=”http://taneppa.jp/images/button.jpg” width=”60″ height=”60″ alt=”ボタン”>

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

③<p>タグの中身に入れてはいけないもの

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

スタイルシート編

①★スタイルシートの優先順

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

>>ちゃんと覚えておきたい!スタイルシートの優先順位のお話

②★スタイルシートに全角スペース

body {
background-color: #fff29a;
}

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

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

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

③★スタイルシートに「;」が抜けていた

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

PHP編

phpの記述がたりない(?忘れ)

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

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


この記事を読んだ人はこんな記事も読んでいます

<

>