「HTMLエラーチェッカー」で簡単にHTML記述ミスを見つける方法

こんにちは、Webデザイナーのうっちーです。

Webサイト製作者の方なら共感していただけると思うのですが、HTMLの構文チェックって大変ですよね？

私も自分で書いたHTMLは毎回チェックしているのですが、タグの閉じ忘れなどがあった場合、そのエラー箇所を見つけるのに少し手間取ってしまうことがあります。

そんな時に便利なのが、Google Chromeの拡張機能「HTMLエラーチェッカー」です。

HTMLエラーチェッカーを使えば、簡単にページ上のHTML記述ミスを見つけることができます。
作業効率もグッと上がるので、ぜひ使い方を参考にしてみてください。

HTMLエラーチェッカーをGoogle Chromeに追加する

まず、以下からHTMLエラーチェッカーをChromeに追加しましょう。

HTMLエラーチェッカー – Chrome ウェブストア

ChromeにHTMLエラーチェッカーを追加すると、以下のように検索アドレスバーの横にアイコンが表示されます。

HTMLエラーチェッカーの使い方

使い方は非常に簡単です。
HTMLの記述をチェックしたいページを開き、検索アドレスバー横のアイコンをクリックしましょう。

エラーがあれば、以下のようにエラー箇所と内容が表示されます。

エラーがなければ、以下のように「タグはおそらく完璧です」と表示されます。

自動エラーチェックの設定

HTMLエラーチェッカーには、自動エラーチェック機能があります。

自動エラーチェック機能を設定しておくと、検索アドレスバー横のアイコンをクリックしなくても、ページを見るだけでエラーチェックしてくれるようになります。

まず、HTMLエラーチェッカーのアイコンを右クリックし、表示された『拡張機能を管理』をクリックしましょう。

「拡張機能」のページが開きます。
「HTMLエラーチェッカー」を探し、『オプション』をクリックしましょう。

HTMLエラーチェッカーの設定画面が開きます。
右上のボタンをクリックし、自動チェック機能を『ON』にしましょう。

デフォルトでは、全てのページが自動エラーチェックの対象になっています。
チェックするページを指定したい場合は、「フィルタリング用のURLを設定」欄にチェックしたいページのURLを入力しましょう。

これで、自動エラーチェックの設定は完了です。

オリジナルの警告ルールを追加

HTMLエラーチェッカーでは、エラーチェックしたいルールを追加することもできます。

例えば、運営しているサイトをSSL化したときに、httpsではなくhttpの記述が残っていないかチェックしたいときに使うと便利です。

HTMLエラーチェッカーの設定画面を開き、「オリジナルの警告ルールを追加する」を『ON』にしましょう。