こんにちは、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/