ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

HTMLエラーチェッカーの使い方【Google Chrome拡張機能】

HTMLエラーチェッカーの使い方【Google Chrome拡張機能】

「簡単にHTMLソースの構文チェックをしたい」
「HTMLエラーチェッカーの使い方を知りたい 」

悩み

こういった悩みにお答えします。

私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

そこで、この記事では、HTMLエラーチェッカーの基本的な使い方、オプションの設定方法について解説しています。

この記事を読みHTMLエラーチェッカーを導入することで、HTMLコーディングのケアレスミス、ミスをしたことによる表示崩れなどを削減し、高品質のコーディングをすることができます。

目次
  1. HTMLエラーチェッカーの使い方
    1. Chrome ウェブストアから拡張機能追加
    2. 基本的な使い方
    3. オプションの使い方
      1. 自動チェックを有効にする
      2. オリジナルの警告ルールを追加する
  2. HTMLエラーチェッカーの代替
  3. まとめ

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

2020年7月15日、「HTMLエラーチェッカー」がChrome ウェブストアに復活したようです。

Chrome ウェブストアから拡張機能追加

HTMLエラーチェッカー

Chrome ウェブストアから拡張機能「HTMLエラーチェッカー」を追加します。

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

基本的な使い方

HTMLエラーをチェックしたいページをアクティブタブにした状態で、Chromeアドレスバーの右あたりに表示されている「HTMLエラーチェッカー」のアイコンボタンをクリックします。

アイコン

エラーがあれば、赤枠で表示され「閉じタグがない」「開始タグがない」といったエラーが発生している行を教えてくれます
これを手がかりにHTMLを修正します。
前後の行が影響してエラーが発生している可能性もあるので、状況に応じて修正します。

ウインドウ

エラーがない場合は青枠表示になります。

ウインドウ

オプションの使い方

自動チェックを有効にする

「自動チェックを有効にする」をONにします。
これでアイコンをクリックしなくても、自動でエラーチェックをしてくれます。

ウインドウ

「フィルタリング用のURLを設定」の入力欄に何も入力しなければすべてのページがチェックされます。
コーディング作業中だけでなく、閲覧しているだけのサイトでもチェックされます。
エラーチェックするページ、サイトを限定したい場合はここにURLを入力します。

注意事項
formがあるページなどで挙動がおかしくなる場合は、「自動チェックを有効にする」をオフにしてください。

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

「オリジナルの警告ルールを追加する」をONにします。

ウインドウ

「フィルタリング用のURLを設定」の入力欄にチェックしたいキーワードを入力します。

どんなときに使うか?
例えば、SSL対応のサイトであれば、
『http://』(SSL未対応)の外部サイトをコーディングに含めていないか」の確認に使えます。
キーワード入力欄に『http://』を入力します。

HTMLエラーチェッカーの代替

HTMLエラーチェッカーの代替として、「HTML Validator」というものがありました。
少し使ってみた感想です。

  • エラーチェックが厳しすぎてエラーばかりになってわかりにくい(設定できるかも)
  • エラー表示がポップアップでなく、開発ツールなのがあつかいにくい
  • 基本、英語なのでわかりにくい

やはりHTMLエラーチェッカーがシンプルで使いやすいですが、復活するまでは「HTML Validator」を使うことも検討してみてください。

HTML Validator

HTML Validator

以下サイトで使い方が解説されています。
Firefox向けの解説ですが、Chrome向けもほぼ同じようです。

まとめ

HTMLエラーチェッカーの使い方について解説しました。

HTMLエラーチェッカーでは、以下の機能を使うことができます。

  • アイコンをクリックしてHTMLソースのチェック
  • アイコンもクリックせずHTMLソースの自動チェック(オプション)
  • オリジナルの警告ルールを追加(オプション)

初心者のうちは入力ミスがあっても気づかず作業をすすめて、あとから修正に時間がかかることが多いです。
こういったことを少なくするためにも、便利な機能はどんどん使っていったほうがいいです。

【2020年】Web制作を効率化!HTMLコーディングに役立つ おすすめChrome拡張機能11選

Web制作を効率化したいですか?この記事では、HTMLコーディングに役立つGoogle Chromeの拡張機能を紹介します。拡張機能を使うことでコーディングの作業性が向上します。ぜひご覧ください。