HTMLとCSSの文法チェックツール5選

プログラミング初心者が最初にぶつかる壁が文法ミスではないでしょうか。今回は、初心者が間違えやすいHTMLとCSSの文法を説明します。さらに、自分が書いたコードを正しい文法が使われているかチェックできるサービスを紹介します。

HTMLで間違いやすい文法

以下のコードを読んで、文法ミスがいくつあるか数えてみてください。

開始タグ・終了タグの<～>の中で全角スペースが使われている

bodyタグの開始タグが全角になっています。

タグ内のタグ名と属性や属性同士が半角スペースでわかれていない

h2とclassがくっついています。

引用符の閉じ忘れ

class=”a”の引用符（ダブルクオーテーション）を書き忘れています。

終了タグを書き忘れている

初心者に最も多いミスがタグの閉め忘れです。特に構造が複雑になればなるほど忘れやすくなるので注意しましょう。終了タグの</p>を書き忘れています。

入れ子タグが間違っている

<p>タグと<storng>タグの順番が間違っています。

CSSで間違いやすい文法

上記のHTMLのコードのh2タグで囲まれた文字を赤色にするCSSコードを書きました。こちらも文法ミスがあるので探してみてください。

スタイルの閉め忘れ

}を入れ忘れています。

セミコロンがない

末尾にセミコロンが記入されていません。

IDとclassの指定を間違えた

aの属性はIDではなくclassなので、#aではなく.aと記述します。

HTMLの文法チェッカー

HTMLの作成が終わったら、正しく構文が書かれているかチェックしましょう。構文のチェックには下記のサイトが便利です。

Another HTML Lint – Gateway

Another HTML Lint – Gatewayは調べたいURLやソースコードを入力するかファイルをアップロードすることで文法ミスをチェックし点数化してくれるサイトです。自分で見ただけでは見落としそうなタグの閉じ忘れなどのミスを教えてくれます。

Another HTML Lint – Gateway

The W3C Markup Validation Service

Web技術の標準化を推進するW3Cがフリーで公開しているHTMLの文法をチェックできるサイトです。英語なのでちょっとわかりづらいですが、W3Cが提供しているため、多くの人に利用されています。

The W3C Markup Validation Service

HTMLエラーチェッカー

HTMLエラーチェッカーは、ブラウザから閲覧するだけでHTMLの文法ミスを自動でチェック出来るGoogleChromeの拡張機能です。
HTMLエラーチェッカー

HTML Validator

HTML ValidatorはFirefoxのアドオンです。このアドオンがあれば、HTMLコードに文法ミスがあった時にその場で警告してくれます。
HTML Validator

CSSの文法チェッカー

W3C CSS 検証サービス

The W3C Markup Validation Serviceのcssバージョンです。CSSの間違いを日本語で表示してくれるので使いやすいツールです。

W3C CSS 検証サービス

【オススメ記事】
➡︎【HTML】ホームページの画像が表示されない原因とその対処法
➡︎ プログラミング入門講座①「HTMLとは〜概要と基本構造〜」
➡︎ プログラミング入門講座②「HTMLの覚えておきたいタグ一覧」
➡︎ 無料で使える！HTMLの学習サイトBEST7
➡︎ 初心者におすすめ！HTMLを勉強できるスクール17選

投稿者：プロナビ編集部

• 
• tweet
•