検索

キーワード


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

  • 公開日:2020-10-02 05:30:08
  • 最終更新日:2020-11-17 22:56:52
【HTML/CSS】よくあるエラーについて

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

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

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


HTMLでよくあるエラー

終了タグ忘れ

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

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


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

  • br
  • img
  • hr
  • meta
  • imput

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


親子関係の崩れ

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


間違った記述

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

正しい記述

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

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


◆入れられないタグ

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

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


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


全角文字の使用

HTML要素は半角文字で記述するので、<img>のように全角文字を使うとエラーになります。

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

これらは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;}

後から書かれたcssが優先される例

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


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

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

<p class="test1">優先順位</p>
p.test1 {color:yellow;}
.test1 {color:blue;}

より詳細に指定されたcssが優先される例

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


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

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

<p class="test1" style="color:red">優先順位</p>
.test1 {color:blue;}

style要素を使ってhtmlで直接cssを指定したものが優先される例

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


id/class

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

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

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


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


セレクタの優先順位

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

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

<p id="sample1" class="test1">優先順位</p>
#sample1 {color:green;}
.test1 {color:yellow;}
p {color:blue;}

要素名よりclass名が、class名よりid名が優先される例

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


HTMLのエラーチェッカー

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


HTMLエラーチェッカー 

Google chromeの拡張機能です。

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


Markup Validation Service

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

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


Dirty Markup

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

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



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


【著者】

松下

今年文系未経験からプログラマとなりました。 同じ初心者の方に分かりやすいよう簡潔な記事を心がけていきます。 趣味はサッカー観戦と洋服です。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ