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