ハシウェブ

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

アフィリエイト広告を利用しています

入力ミスがすぐわかる!HTMLエラーチェッカーの使い方【Chrome拡張機能】

この記事は、最初の投稿から3年以上が経過しています。

最終更新から1181日が経過しています。

入力ミスがすぐわかる!HTMLエラーチェッカーの使い方【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エラーチェッカー

便利なおすすめのChrome拡張機能をこちらの記事にまとめています。

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

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

基本的な使い方

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

アイコン

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

ウインドウ

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

ウインドウ

オプションの使い方

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

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

ウインドウ

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

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

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

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

ウインドウ

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

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

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

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

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

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

HTML Validator

Add HTML Validator in Developer Tools

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

まとめ

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

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

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

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