WEB制作/ブログ

「HTMLエラーチェッカー」の3秒チェックで凡ミスを防げ!【Chrome拡張機能紹介】

記事内に商品プロモーションを含む場合があります

悩む人々
悩む人々
WEBページができた!凡ミスがないか心配だけど、ソースを1行ずつみるのは大変だなあ・・・

ざわむー
ざわむー
公開前の3秒チェックには、GoogleChromeの拡張機能「HTMLエラーチェッカー」が便利です!

タグの閉じ忘れのようなちょっとしたミスは、3秒で確認して安心しましょう。
本記事では、GoogleChromeの拡張機能とその使い方をご紹介します!

Chromeの拡張機能って?

いわむー
いわむー
一言で言えば、パソコンでGoogleChromeをより便利に使うためのツールです!

拡張機能は chromeウェブストア からインストールすることができます。
様々な拡張機能が扱われており、その数は日々増えています。
その機能によって、インストールをするだけで自動に動くものや、拡張機能のアイコンをクリックすると作動するものまで、様々です。

HTMLエラーチェッカー とは

HTMLエラーチェッカー は、HTMLの開始・終了タグの過不足などを検出するChromeの拡張機能です。

divタグやliタグなど、うっかり閉じタグをつけ忘れた!なんてことありませんか?
表記崩れの原因が、「閉じタグを正しくつけたら一瞬で解消した!」というのもありがちですね。

いわむー
いわむー
とはいえ、タグの過不足を目視で確認しようとすると大変そう・・・

ざわむー
ざわむー
拡張機能で3秒でチェックしちゃいましょう!

拡張機能のインストールと使い方

では早速、インストールして使ってみましょう!

インストール方法

1、chromeウェブストアの、HTMLエラーチェッカー のページ を開く

2、右上の「Chromeに追加」をクリックし、拡張機能を追加

インストールはこれだけです!
右上のパズルマークをクリックすると、追加されていることがわかります。

画鋲マークをクリックすることで、上部のバーに常に表示されるようになります。
頻繁に利用する場合は、HTMLエラーチェッカーのアイコンを常に表示しておくと便利です!

使い方

使い方はとってもかんたん。
エラーチェックをしたいページを開いて、拡張機能のアイコンをクリックするだけ!

すぐにソースチェックが始まります。
問題がない場合は、こんな表記になります。

ざわむー
ざわむー
「おそらく」って突然自信ない感じになるの、ちょっと面白くて毎回クスっとなります(笑)

閉じタグに誤りがあると、こうなります。
大量に誤りがでているように見えますが、実は</div>タグを1つ消しただけ。
周囲に影響が出てしまっている状況のようです。

おわりに

いかがでしょうか?
今回はWEBページ全体のスクリーンショットを取得するchrome拡張機能、「HTMLエラーチェッカー」をご紹介しました。

ざわむー
ざわむー
あくまでも簡易的なチェックですが、これが3秒で終われば、他のチェックに時間と意識をまわすことができます!それって重要なことだと思うんです!

効果的なツールを上手に使いながら、作業効率UPを目指していきましょう!

ABOUT ME
いわざわ夫婦
いわむーとざわむーで「いわざわ夫婦」です。いわむーは動画制作を仕事に、ざわむーはWEBサイト制作の仕事を主にしています。基本は在宅ワーク。どこででも働けるからこそ、フットワーク軽く自分たちが関わりたい地域にふらっと行って、楽しく過ごす生活をしています。