コーダー初心者が起こしやすいバグのコーディング例を紹介

コーディングをはじめたばかりだとちょっとしたミスでレイアウトが崩れてしまったりバグを起こしたりすることもあると思います。

最初のうちはどこが問題なのかわからず調べるのに時間がかかってしまったりすることもあります。

ですが大体の場合は、記述のミスだったりすることがほとんどだと思います。

今回はコーディングでバグを起こしてしまうコーディング例を紹介していきたいと思います。

もしエラーや問題が起こった時の参考にしていただければ早めに問題個所を見つけれられるんじゃないかなと思います。

バグが起こってしまうコーディング例

基本的なミスで多いのが閉じタグ忘れだと思います。

たとえばdivタグの閉じタグがない、pタグの閉じタグがないなどです。

<div>
        <p>テキスト1</p>
<div>
        <p>テキスト2</p>
</div>

上記の場合だと最初のdivタグに対してのdivタグの閉じがないのでhtmlチェックをするとエラーになります。

こちらもコーディングをはじめた頃に起こりやすいミスです。

タグは半角文字を使うようにしましょう。

全角文字を使うとエラーや表示崩れの原因になります。

たとえば＜ｐ＞、＜ｄｉｖ＞などのように全角にするとエラーになります。

タグのスペルミスは表示崩れの原因になります。

<dix>テキスト</div>

上記はdivタグのスペルミスですね。

<div clas="box"></div>

上記はクラス指定のスペルミスになります。
clas　⇒　classに修正しましょう。

<div ia="box"></div>

上記はid指定のスペルミスになります。
ia　⇒　idに修正しましょう。

idやクラスを指定するときクォーテーションをつける必要があります。

<div class=box>テキスト</div>

上記はクォーテーションの付け忘れです。

<div class=box>は<div class=”box”>と書きましょう。

半角・Tab以外に全角スペースがある場合に思わぬ崩れなどが起こる可能性があります。

「–box」などのようにクラス名の頭にハイフンを2つ使うとブラウザによってはその指定が無視されます。

モダンブラウザではきいているようですがIE11とかで指定がきかないようです。

<div class="--box">
        <h2>タイトル</h2>
</div>

コーディングをしているとスペルミスが起こってしまうこともあると思います。

htmlの作成ツールなどを使うとタグの閉じタグを入力してくれたりするのでミスを防ぐことができます。

またコーディングをしたあとにhtmlのチェックツールなどを使うことで事前にhtmlの問題を探すことができますので積極的に使うと良いと思います。