コーダーに必須の神ツール【HTMLエラーチェッカー】をインストールしよう

ニャンコ

HTMLエラーチェッカーを入れておけばコーディングのミスを減らすことができるよ

HTMLエラーチェッカーのインストール方法

HTMLエラーチェッカーは、タグの閉じ忘れや、タグの間違いなどを検出してくれるChromeの拡張機能です。
コーディング中のChromeでの表示確認は必須なので、Chromeが入っていないコーダーはいないと思いますので、そこは問題なしですよね。

導入方法は物凄く簡単です。
Chromeの拡張機能インストールページより簡単に導入できます。
下記ボタンよりインストールページへ飛べます。（アフィリエイトでも何でもないので安心してクリックしてください（笑））

HTMLエラーチェッカー

拡張機能のページを開いたら、右の「Chromeに追加」ボタンを押します。

ダイアログが開かれたら「拡張機能を追加」ボタンを押すとインストールされます。

HTMLエラーチェッカーの使用方法

さっそくインストールしたHTMLエラーチェッカーを使用してみましょう。

チェックしたいページをChromeで開く

まずは、HTMLの構文をチェックしたいページをChromeで開きます。

Chromeの右上から拡張機能を選択する

URL横の拡張機能ボタンを押して拡張機能一覧を開き、HTMLエラーチェッカーを選択する。

タグに間違いがない場合

タグ構成に間違いがない場合は、青色の画面になります。
「タグはおそらく完璧です」と書いてるのはちょっと自信なさげで面白いですね。
ただ、私が今まで使用した限りエラーチェッカーが間違ってたことはないので安心して大丈夫です。

タグに間違いがある場合

タグ構成に間違いがある場合は、赤色の画面で表示されます。
また、おかしいところを何行目と表示もしてくれます。
青色のリンク部分を押すとその行に飛んでくれます。

いっぱいあるように見えるけど、実はタグが一つ抜けてるだけで一気に直ったりするときもあるよ。

どこがおかしいかエラーメッセージを見ながら直していこうね。

ワンコ

HTMLエラーチェッカーの使用タイミング

HTMLエラーチェッカーは一瞬で結果が表示されますので、いつ使用してもいいでしょう。
オプションで、常にエラーをチェックすることも可能です。

ただ、絶対に使用した方が良いのはコーディングが終わったタイミングや、納品前のタイミングに再チェックはした方が良いでしょう。

私がエラーチェッカーを使用して、よくあるミスは<span>タグを多用してる箇所の閉じ忘れや、divが連続した場合の閉じ忘れ等が多かったです。
表示は完璧でも実は、タグが抜けているなどの事が結構あります。

HTMLエラーチェッカーを使用してミスのないコーディングを心掛けましょう。

副業・案件獲得

2024/3/3

無料プログラミングスクールのオススメ6選【完全無料】

無料で学べるプログラミングスクールが存在するプログラミングは現代社会における重要なスキルの一つとなっており、多くの人々が学びたいと考えています。しかし、プログラミングスクールの料金相場は、スクールやコースによって異なりますが、一般的には10万円から70万円程度と言われています。最近は、「リスキリングを通じたキャリアアップ支援事業」という国からの補助金で最大70％オフになるので、数年前に比べたら格段に入学しやすくはなっているのですが、補助金を貰えるのが学習や転職を終えた後のため、一時的に数十万円というお ...

副業・案件獲得

2024/1/21

プログラミングスクール【70%OFF】その方法を解説

最近プログラミングスクールのサイトを見ると、受講費用の70%OFF（上限56万円）という表記をよく見ますね。これは、「リスキリングを通じたキャリアアップ支援事業」の一環ですが、私はこのことについてあまり知りませんでした。なので、今回はこの「リスキリングを通じたキャリアアップ支援事業」についてと、補助金を受け取るための条件などを調べてみました。スクールに入校を考えている方は、絶対利用した方がいい制度なので是非最後までお読みください。「リスキリングを通じたキャリアアップ支援事業」って何？まず、リスキリング ...

副業・案件獲得

2024/3/3

オンライン学習動画「Schoo」体験レポート

おすすめ登録・生放送授業が無料！オンライン学習動画サービス 7000本の授業が見放題！社会人向けオンライン学習動画【Schoo(スクー)】 7000本の授業が見放題！オンライン学習動画【Schoo(スクー)】総合評価：「参加型生放送授業」と、「8,000本以上の録画授業」で動画学習「WEBアプリケーション開発【入門】」や「HTML・CSS基礎」などWEB制作講座も多彩！参加型生放送授業は無料、録画授業は月/980円と格安で学べる！ ●365日配信される参加型生放送授業が無料●チャットで業界の気軽に ...

副業・案件獲得

2024/2/27

現実的にお金を増やす方法を考える！

1.WEB制作の案件を受注して普通に稼ぐ WEB制作副業で稼ぐ WEB制作の知識を学習して、案件を獲得する方法。プログラミングに比べ、学習がしやすく、かつ簡単。この方法の一番の利点は、実力を付けることが出来ればその後の選択肢が様々広がることでしょう。私もサービス業から在宅コーダーへとJOBチェンジしたので生活がすっごい楽です。依頼が豊富学習がし易く、比較的簡単実力があれば安定して仕事を得る事ができる実力を付けることが出来ればその後の選択肢が広がる最低でも数か月の学習期間が必要案件を獲得するまで ...

副業・案件獲得

2024/1/30

エックスサーバーがブログ初心者に超おすすめの理由！

エックスサーバーをおススメする理由！サーバーは、ウェブサイトを公開するための重要な要素です。初心者の方にとっては、使いやすく信頼性の高いプロバイダを選ぶことが重要です。この記事では、初心者におすすめのホスティングプロバイダであるエックスサーバーの利点について紹介します。エックスサーバーは、その使いやすさ、信頼性、豊富な機能などで多くのユーザーに支持されています。その魅力的なポイントを見ていきましょう。エックスサーバーウェブホスティングプロバイダは、個人や企業が自分のウェブサイトを利用できるように ...