HPのデザインとhtmlコーディング

htmlのコーディングにミスがあると意図したデザインにならない

web制作でよくあることのひとつに、htmlファイルをアップロードしてブラウザでデザインを確認してみたら、意図していたものと違っていたということが挙げられます。原因としてもっとも考えられるのは、htmlのコーディングミスでしょう。基本的にサイトのデザインを行う場合、特定部分のdivタグなどにclassもしくはidを割り振り、そのclassやidに対してcssでデザインを設定します。この際、htmlに書かれたclassやidと、cssで設定したclassやidの名前は完全に一致させなければなりません。もし、一文字でも違えばデザインは適用されないのです。 したがって、たとえば見出しのフォントは赤くなるはずなのに黒のままなど、デザインが適用されていない場合は、htmlとcssを見比べて該当部分のclassやid名が一致しているか必ず確認しましょう。

htmlのチェックサイトを利用して記述ミスを見つける

htmlでタグを記す場合において、本来、空白を入れなければならないのに詰めて書いてしまったことで、classやid名が無効になってしまうというミスもよくあります。たとえばdivタグにclass属性を設定する場合、div classという風にdivとclassの間を空けなければなりません。もし、この空白を入れずにコーディングしてしまうと、divclassという風になってしまい、ブラウザはこの部分がdivタグの指定であると認識できません。そのため、classの名前はhtmlとcss、両方で一致していたとしてもデザインが適用されないのです。 こうしたコーディングのミスを防ぐためには、htmlのチェックサイトを利用するといいでしょう。チェックしてほしいページのURL、もしくはhtml全体のコピーを貼りつけると、htmlの文法ミスがないかを確認してくれ、問題があるとエラーとして表示してくれるのですぐにわかります。