「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』にしましょう。
すると、下部に「フィルタリング用のキーワードを設定」という入力欄が表示されます。
こちらにルールを記述しましょう。
今回の場合だと、
http://サイトのドメイン
と記述しておけば、サイト内にhttpの記述が残っていた場合にエラーが表示されるようになります。
まとめ
今回は、「HTMLエラーチェッカー」の使い方を解説しました。
操作も簡単で手軽にHTMLの記述ミスがないかチェックできますので、気になった方はぜひ使ってみてください。
●認定支援業務の実践&売り上げUP方法なら
「認定支援ビジネス実践会」
http://nintei.org/jissen/
●認定支援ビジネス実践会の情報がLINEに届く!
(既存会員様はご利用いただけません)
●公式Facebookページ
https://www.facebook.com/wakasugicpa/