今回は、初心者でも使いやすいHTMLコーディングチェックツールを紹介します。誰でもうっかり起こしてしまいがちなHTMLの文法誤りもあわせて紹介しますので、ツールを活用してミスを減らし、スムーズなHTMLコードの記述を目指しましょう。
目次
起こしがちなHTMLコードの文法ミス2選
HTMLを記述する際、誤表記やエラーを起こしてしまった経験は誰しもあることでしょう。文法ミスのなかでも特に多いのが以下の2点です。
閉じタグ忘れ
基本的なHTMLコードの文法は、開始タグと閉じタグがきちんとセットになっていることがポイントです。しかし、コードの書き直しや組み直しを繰り返していると、うっかり閉じタグを忘れてしまうことも少なくありません。Webページのデザインが崩れている場合、まずは閉じタグ忘れを疑いましょう。特に入れ子になるタグは注意が必要です。インデントを揃えると、閉じタグ忘れのミスに気付きやすくなります。
クラス名のスペルミス
閉じタグ忘れに続いてやってしまいがちなのが、クラス名のスペルをうっかり間違えることです。「ページの表示がうまくいかない原因を探っていたら単純なスペルミスだった」という場合も意外と多いため、検索・置換機能などを使ってスペルミスを未然に防ぐことをおすすめします。
おすすめHTMLコーディングチェックツール・サイト3選
ミスしている部分を目視で探していくのは時間がかかってしまいます。HTMLコーディングチェックツールを使用すると、簡単にミスの有無を確認できるので便利です。
Another HTML-lint gateway
Another HTML-lint gatewayは、オンラインでHTML（またはXHTML）の文法をチェックし、結果を点数表示できるWebサイトです。ダウンロードすればローカル環境でも使用できます。チェック項目が多数あり、自分で項目をカスタマイズすることも可能です。
エラーの警告には重要度に応じて数値が表示されており、修正が必要かの見極めの参考になります。また、エラー警告に疑問を感じた時は、解説を読み、正しい記述法を学ぶこともできます。ただし、チェックの対象は文法のみで、HTMLの記述内容の評価はしていません。
Markup Validation Service
Markup Validation Serviceは、Webで利用される技術の標準化を推進する非営利団体・W3Cがフリーで公開しているWebサイトです。オンラインでHTML文書がHTML・XHTML標準に準拠しているかどうかを検証してくれます。随時更新されており、HTML5にも対応しています。
検証法は「Address欄にサイトのURLを入力する」「ファイルをアップロードする」「直接記述する」の3つです。チェックの結果エラーがあれば、コードの該当箇所と解説が表示されるため、正しいマークアップを学びつつ修正を行えます。表記が正しい場合は、”successfully”と表示されます。
Dirty Markup
Dirty Markupは、HTML、CSS、JavaScriptのソースをチェックし、整理するオンラインツールです。基本操作は、ページ右側のエディットスペースへコードを入力し、Cleanボタンをクリックするだけ。必要に応じてチェックの厳格性や表示結果などのオプションが選択できます。実行後、読みやすいように要素ごとに改行やインデントが自動的に付され、足りない要素があれば補完してコードが最適化されます。
エラーや警告は行番号欄に表示され、また、タグ行の番号欄に表示された▽をクリックすると、対応する閉じタグにジャンプする機能もあります。Webページとして公開した後、ある程度時間が経過したコードのチェックに役立つサイトです。
HTMLの作成・チェック・修正は「クラウドワークス」へ
HTMLのコーディングやチェック、修正を自分で行うのが難しい場合や、コーディングに自信がない場合は、プロのプログラマーに依頼してみるのもいいでしょう。「知人にプログラマーがいない」「制作会社に依頼するのは気が引ける」といった際は、クラウドソーシングサービス（仕事を依頼したい人・受注したい人をインターネット上でマッチングするサービス）の活用がおすすめです。
例えば、国内大手の「クラウドワークス」にはHTMLのコーディングを得意とするプログラマーが多数登録しています。各々のスキルや実績、受注数などの詳細も確認できるため、信頼の置けるクラウドワーカーに依頼することができます。
▶HTML関連の仕事を依頼できる人材も多数！実際のプロフィールを見てみる
システム関連会社や個人として独立しているプログラマーへ依頼しにくい小さな依頼（ごく簡易的なHMTLコーディング、自作のHTMLのチェック・修正など）であっても発注でき、難易度の低い仕事ほど安価で受けてもらえるため気軽に依頼できます。
▶どの仕事をいくらで頼める？発注の相場感を知りたい方はこちら
必要なタイミングでの単発依頼にくわえ、プログラムに不具合があった際の対応や定期的なメンテナンスを長期的に依頼することもできるため、柔軟な発注が可能です。
▶クラウドワークスの使い方や事例がわかる資料をダウンロードする
クラウドワークスのサービス資料
サービス特徴、活用事例、発注相場などを紹介しています。
【こんな方におすすめ】
・サービスを詳しく知りたい
・外部人材の活用を検討したい
・発注相場や事例を知りたい
