[拡張機能]HTMLエラーチェッカーで文法違反を簡単に見つけよう!

OMIYA!

こんにちは! ヨス(@yossense)です。

今回は、Google Chrome拡張機能HTMLエラーチェッカー」を紹介します。

HTMLエラーチェッカーとは?

HTMLエラーチェッカーというのはどんな拡張機能なのでしょうか?

これは、簡単にページ上のHTML文法違反を教えてくれる拡張機能です。

HTMLチェッカーで簡単にHTMLの文法ミスを発見!
HTMLチェッカーで簡単にHTMLの文法ミスを発見!

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

では、HTMLエラーチェッカーを具体的な使い方を紹介します。

通常の使い方

使い方は説明するまでもないレベル。

Google Chromeの右上にある ← こんなアイコンをクリックするだけです!

HTMLチェッカーで簡単にHTMLの文法ミスを発見!
HTMLチェッカーで簡単にHTMLの文法ミスを発見!

そしたら上の画面のように、ずら~っとエラーのある場所がリストになって出てきます。

しかも、そのエラーの部分をクリックすると、そのページ上のどこかも簡単にわかるんですよ。

では、どんな内容を「エラー」だと探知してくれるかというと……

HTMLエラーチェッカーが探知してくれるエラー
開きタグ忘れ たとえば「ヨッセンス</strong>は最高のブログですな」のように<strong>が抜けているとき
閉じタグ忘れ たとえば「ヨッセンスは<strong>最高のブログですな」のように</strong>が抜けているとき
タグの順番間違い たとえば「<a href="https://yossense.com/"><b>ヨッセンス</a></b>は最高のブログですな」のように</a></b>の閉じタグの順番がおかしいとき
ヨス

これは便利ですね!

自動エラーチェック

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

自動エラーチェックが何かというと、ブラウザ右上の ← このアイコンをクリックしなくても、ページを見るだけでエラーチェックをしてくれるようになる機能です。

便利なので、「ON」にするやり方を紹介します。

1拡張機能のページ

まずは「拡張機能」のページに行きましょう。

拡張機能のページ

2HTMLエラーチェッカーのところの「オプション」

拡張機能のリストの中から「HTMLエラーチェッカー」を探し出し、「オプション」のところをクリックします。

拡張機能の「HTMLエラーチェッカー」のところの「オプション」
拡張機能の「HTMLエラーチェッカー」のところの「オプション」

3上側を「ON」にする

開いたウィンドウ(オプション)の上側を見てください。

「自動チェックを有効にする」とある右に「OFF」というマークがありますよね?

「オプション」の上側を「ON」に
「オプション」の上側を「ON」に

ここを「ON」にすると、ページを開いたら自動でHTMLの文法をチェックしてくれるようになります。

下の欄(2)にはチェックしたいサイトのURLを入れればオッケーです。

わたしの場合は、2サイト運営していて、この2つのサイトだけエラーチェックしてくれればオッケーなので、2つ入れています。

https://yossense.com/
https://ipa-mania.com/

こんな感じで改行して入力すればオッケーです。

何も入力しなければ、全サイトでエラーチェックします。

エラーチェックしたいルールを追加

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

たとえば、SSL化したあと、画像のURLが「https://」ではなく、「http://」のものがあると警告が出ます。

非SSLとSSLの違い
非SSLとSSLの違い

そこで先ほどの「オプション」のウィンドウです。

警告ルールを追加
警告ルールを追加

下側にある「フィルタリング用のキーワードを設定(行毎に有効)」にある「OFF」を「ON」にします。

そのさらに下にある(2)に「src="http:」というルールを追加するだけ!

これで、「SSL」に対応していない画像URLも「エラー」として感知してくれるようになり、HTMLエラーチェッカーによってどの画像がエラーになっているのかが簡単にわかるようになります!

ほかにも自分で気になるところがある場合、ルールを追加してみてくださいね!

今回はHTMLエラーチェッカーの紹介でした。

ブログを書いている方よりも、どちらかと言うとサイト運営している人向けの内容です。

とくにわたしのようにHTMLタグで直接コーディングする人は要チェックですよ。

Twitterでヨスをフォローしよう!

気に入ったらどしどしシェアしてね♪
あわせて読みたい