HTMLエラーチェッカーを入れておけばコーディングのミスを減らすことができるよ
HTMLエラーチェッカーのインストール方法
HTMLエラーチェッカーは、タグの閉じ忘れや、タグの間違いなどを検出してくれるChromeの拡張機能です。
コーディング中のChromeでの表示確認は必須なので、Chromeが入っていないコーダーはいないと思いますので、そこは問題なしですよね。
導入方法は物凄く簡単です。
Chromeの拡張機能インストールページより簡単に導入できます。
下記ボタンよりインストールページへ飛べます。（アフィリエイトでも何でもないので安心してクリックしてください（笑））
拡張機能のページを開いたら、右の「Chromeに追加」ボタンを押します。
ダイアログが開かれたら「拡張機能を追加」ボタンを押すとインストールされます。
HTMLエラーチェッカーの使用方法
さっそくインストールしたHTMLエラーチェッカーを使用してみましょう。
チェックしたいページをChromeで開く
まずは、HTMLの構文をチェックしたいページをChromeで開きます。
Chromeの右上から拡張機能を選択する
URL横の拡張機能ボタンを押して拡張機能一覧を開き、HTMLエラーチェッカーを選択する。
タグに間違いがない場合
タグ構成に間違いがない場合は、青色の画面になります。
「タグはおそらく完璧です」と書いてるのはちょっと自信なさげで面白いですね。
ただ、私が今まで使用した限りエラーチェッカーが間違ってたことはないので安心して大丈夫です。
タグに間違いがある場合
タグ構成に間違いがある場合は、赤色の画面で表示されます。
また、おかしいところを何行目と表示もしてくれます。
青色のリンク部分を押すとその行に飛んでくれます。
いっぱいあるように見えるけど、実はタグが一つ抜けてるだけで一気に直ったりするときもあるよ。
どこがおかしいかエラーメッセージを見ながら直していこうね。
HTMLエラーチェッカーの使用タイミング
HTMLエラーチェッカーは一瞬で結果が表示されますので、いつ使用してもいいでしょう。
オプションで、常にエラーをチェックすることも可能です。
ただ、絶対に使用した方が良いのはコーディングが終わったタイミングや、納品前のタイミングに再チェックはした方が良いでしょう。
私がエラーチェッカーを使用して、よくあるミスは<span>タグを多用してる箇所の閉じ忘れや、divが連続した場合の閉じ忘れ等が多かったです。
表示は完璧でも実は、タグが抜けているなどの事が結構あります。
HTMLエラーチェッカーを使用してミスのないコーディングを心掛けましょう。
