【HTML/CSS】よくあるエラーについて

こんにちは。駆け出しプログラマーの松下です！

HTMLとCSSでよくあるエラーについて説明します。

HTMLの基本を学び試してみたけれどうまくいかない、そんな方の参考になれば幸いです！

HTMLでよくあるエラー

終了タグ忘れ

<div>はあるのに対応する</div>が無いといった、終了タグを忘れる場合があります。後からコードを修正したときは注意が必要です。

逆にimgタグのような、終了タグがいらないものにつけてしまわないように気をつけましょう。

◆終了タグを必要としない主なタグ

• br
• img
• hr
• meta
• imput

これらに終了タグをつけてしまうとエラーになります。

親子関係の崩れ

入れ子構造が複雑なときは、子要素の終了タグを親要素の外側に書いてしまわないなど、要素ごとの位置にも注意しましょう。

間違った記述

<ul>
    <li>夏目漱石<!--親リスト１--></li>
    <ul>
        <li>坊っちゃん<!--子リスト１--></li>
        <li>吾輩は猫である<!--子リスト２--></li>
    </ul>
    <li>芥川龍之介<!--親リスト２--></li>
</ul>

正しい記述

<ul>
    <li>夏目漱石<!--親リスト１-->
        <ul>
            <li>坊っちゃん<!--子リスト１--></li>
            <li>吾輩は猫である<!--子リスト２--></li>
        </ul>
    </li>
    <li>芥川龍之介<!--親リスト２--></li>
</ul>

上の例では文豪の名前リストの中に作品リストが入っている入れ子構造ですが、間違った例は「夏目漱石」の後ろに</li>を記述し親リストのliが閉じてしまっているので、その中に子リストが作成できていません。

◆入れられないタグ

pの中にdivや h1〜h6などの見出し要素は入れられません。

基本的にul・olの中にはli、tableにはtrのみが入ります。

一方、divやliはほぼ全ての要素を囲うことができます。

全角文字の使用

HTML要素は半角文字で記述するので、＜ｉｍｇ＞のように全角文字を使うとエラーになります。

特に全角スペースが入っていてのエラーがあります。

これらはCtrl＋Fで簡単に見つけることができます。

クォーテーション忘れ

<img src="ねこ.jpg">や<div class="test1">といった属性値を「""」で囲むことを忘れないようにしましょう。

CSSでよくあるエラー

CSSファイルの読み込み指定したリンクが間違っていることや、HTMLと同じように全角スペースを入れてしまい起きるエラーの他にもありがちなミスを紹介します。

かっこの数

｛｝を忘れてしまったり、多くしてしまったりするとエラーになります。

コロン、セミコロン

プロパティと値の間には「:（コロン）」、スタイル適用の終わりには「;（セミコロン」をつけるのを忘れないようにしましょう。また:と;混同しやすいことにも要注意です。

プロパティを二つ以上指定するときに、間のプロパティに；をつけることが忘れられがちです。

ol{
color: red
background: silver
border: double;
}

上の例では「red」「silver」の後ろにも；が必要となります。

コメント

複数行をコメントアウトするときは囲む位置に気をつけましょう。

HTMLのコメントアウト<!––　––>と混同しないようにしましょう。

CSS内で使えるコメントアウトは /*　*/ です。

スタイル指定のかぶり

CSSの指定された要素がかぶってる場合、適用される優先順位のルールがあります。これによって意図通りにならないことがあります。

後から書いたものが優先される

CSSは上から順に読み込んでいくので、基本的に後から読み込まれるものが優先されます。

<p class="test1">優先順位</p>

p {color:red;}
p {color:yellow;}
p {color:blue;}

より後に書かれた値に上書きされています。

詳細に場所が指定されてるものが優先される

指定する箇所が、より具体的な方が優先されます。

<p class="test1">優先順位</p>

p.test1 {color:yellow;}
.test1 {color:blue;}

あとから書かれた値の青色ではなく、場所がより詳細に指定されている値の黄色になっています。

styleタグなどを使いHTMLに直書きしているものが優先される

HTMLへ直接記述したものはCSSを読み込むよりも優先度が高いです。

<p class="test1" style="color:red">優先順位</p>

.test1 {color:blue;}

CSSファイルの記述より直接styleタグで指定された値が優先されたので、赤色になっています。

id/class

id/classを扱うときにいくつか注意点があります。

id、class名は必ず半角英字から始めなければいけないので、記号や数字からだとスタイルが反映されません。

指定する際、id名の前には「#」、class名の前には「.」をつけます。

idは同じページ内で１回しかスタイルの指定をできません。

セレクタの優先順位

前述の優先順位がセレクタにもあります。

divやpなどの要素名よりclass名が、class名よりid名が優先されます。

<p id="sample1" class="test1">優先順位</p>

#sample1 {color:green;}
.test1 {color:yellow;}
p {color:blue;}

idで指定されている緑色になりました。

HTMLのエラーチェッカー

エラーチェックのツールを使うことで手軽にミスを見つけることができます。

・HTMLエラーチェッカー　

Google chromeの拡張機能です。

拡張機能を追加し、 chormeでチェックしたいページを開きアイコンをクリックするだけなので簡単にできます。

・Markup Validation Service

w3cが提供している文法チェックツールです。

HTMLの規格を策定している団体が運営するサイトなので精度が高いです。

・Dirty Markup

HTMLもCSSもチェックのできるサイトです。

文法チェックだけでなく、コードを見やすく整形してくれるという特徴があります。

関連記事リンク:　id/class,style属性について　入れ子構造のリストについて