HTML・CSSのチェックツール！W3CのValidatorの使用法

W3CのValidatorとは？

Validatorとは、コードの検証を行うツールのことです。Validatorにはいくつかの種類がありますが、今回はW3C が提供しているValidatorについて解説していきます。

HTML（XHTML）文法をチェックするには「Markup Validation Service」、CSS文法をチェックするには「CSS Validation Service」を使います。どちらもインターネット上から無料で利用することができます。

W3Cとは？

Validatorを提供しているW3Cとは、「World Wide Web Consortium」というWeb技術を標準化するための非営利団体の略称です。

Web技術はさまざまな会社や団体が開発を行っており、それを受け取るユーザー側の環境も多種多様です。「インターネット上のWebサイトを見る」という1つの行動をとっても、パソコンで見るのか、スマホで見るのか、という違いがあります。さらに、使用するブラウザーはGoogle Chromeなのか、Internet Explorerなのか、それともSafariなのか…と、いろいろなパターンがあることが想定されます。

もし開発者がパソコンからGoogle Chromeを利用した場合にのみ利用できるHTMLタグを作っていったとしましょう。すると別のデバイスから、あるいは別のブラウザーを使ってWebページにアクセスするユーザーは、置いてけぼりになってしまいます。

そこで大切なのが、どのような環境でも通じる共通ルールの勧告＝Web技術の標準化です。この標準化を行っているのがW3Cなのです。W3Cという団体が共通の基準を定めてくれているおかげで、さまざまな環境におけるWeb技術の互換性が保たれるというわけです。W3CのValidatorは、Web技術標準のルールに照らし合わせて、サイトの文法が正しいかどうかを判定してくれます。

W3CのValidatorを使用するとどんなメリットがある？

自分では気が付かない文法のミスが分かる

HTMLやCSSをコーディングしている段階では、コードの打ち込みに夢中になってしまい文法ミスに気付きにくいものです。特にHTMLやCSSは基本的に英単語がベースになっていますので、日本人としてはちょっとしたタイピングミスをしがちなのではないでしょうか。完成したHTMLファイルをブラウザーで表示したものの、思ったような見ためにならず、間違っている箇所も発見できない時は、Validatorを使うことで手掛かりが得られるかもしれません。

また、一見正しく表示されているのにW3Cの標準ルールから言えば望ましくないケースもあります。

例えば、imgタグにはalt属性が必須とされています。何らかの原因で画像へのリンクが切れてしまったとき、alt属性に設定したテキストが画像に代わって表示されます。また、alt属性はWebページ読み上げブラウザーを使用したときに、画像の内容を音声で伝えるためにも利用されます。

さらに、検索エンジンは画像の代わりにalt属性に設定したキーワードを参照するといわれています。このように、alt属性が果たす役割は非常に重要です。

imgタグによる画像へのリンクが正しい場合は、たとえalt属性が記述されていなかったとしても画像はちゃんとブラウザー上に表示されます。しかしここで安心してしまうと、alt属性を落としていることに気付きません。一見正しく見えるHTMLやCSSでも、実は文法ミスをしていることがあります。

そうしたミスの発見に、Validatorは非常に役に立つツールと言えるでしょう。

メンテナンスしやすいWebページを作成することができる

WebページをW3Cのルールに合わせて作成することは、万人に分かる枠組みでコードを書くことに繋がります。独りよがりなコード作成は、その場限りのルールで進行しています。そのため、後で見直してみると文法構造が分かりにくく、メンテナンスに手間がかかってしまう可能性があるのです。

特に大規模なWebページの場合、メンテナンスを行うのは自分一人とは限りません。チームで仕事をしたり、Webページの管理を第三者に任せたりという可能性もあります。そんな時に、自分だけにしか通じないルールでコードを書いていると、他人がWebページの構造を理解しづらくなるのです。

Validatorを上手に利用すれば、自分も他人もメンテナンスしやすいWebページを作ることができます。

Markup Validation Serviceの使用方法

それでは、実際にValidatorを利用してみましょう。まずは、HTMLのチェックツールである Markup Validation Serviceの使用方法をご紹介します。

Markup Validation Serviceにアクセス

最初に、下記のURLからMarkup Validation Serviceへアクセスしましょう。Markup Validation Serviceには、以下の3つのチェック方法があります。

URLによるチェック

すでにオンライン上にあるWebページの文法チェックを行います。「Validate by URI」（URLではなくURI表記）のタブをクリックし、Addressの欄にチェックしたいWebページのURLを貼り付けます。最後に「Check」をクリックしてください。

ファイルアップロードによるチェック

HTMLファイルをアップロードして、文法チェックを行います。「Validate by File Upload」のタブをクリックし、Fileインプットボックス「ファイルを選択」からチェックしたいHTMLファイルを選びます。その後、Checkをクリックして下さい。

コードを直接入力してチェック

HTMLコードを直接入力して文法をチェックすることもできます。コーディング中の簡単なチェックなどに便利です。

「Validate by Direct Input」のタブをクリックすると、コードを入力するインプットボックスが現れるので、ここにHTMLタグを直接入力します。最後に「Check」をクリックします。

エラー0の場合

チェック後に画像のような緑色のメッセージ「Document checking completed. No errors or warnings to show.（ドキュメントチェックが完了しました。表示するエラーや警告はありません。）」が表示されれば、このWebページにエラーは存在しません。

チェック後にエラーの表示が出た場合

次に、エラー表示が出た場合の対処方法を見てみましょう。

エラー表示の見方

文法チェックでエラーが見つかった場合、結果画面に赤色で「Error（エラー）」と表示されます。エラー画面の詳細を見てみましょう。

これは同じIDを2か所に使ったために起きたエラーです。「From line 9,column1;to line9,column12」がエラーが起きている箇所（9行目1列～9行目12列）です。この表示を手掛かりに、エラーの場所を見つけて修正してください。

なお、エラー以外で「Warning（警告）」という黄色の表示があります。こちらは、「あまりよくない書き方です」という忠告です。文法的に完全に間違っているというエラーよりは、やや弱いニュアンスです。

例えば、以下のコードはエラーではなく警告です。

<h4></h4＞

タグが閉じているため、文法的には間違いではありませんが、タグの中身がない空の見出しになっています。実際、コード的に意味がないので、削除するか見出しの中身を追加するのが望ましい部分です。

よくあるエラー画面

Markup Validation Serviceで指摘されやすいエラーがいくつかありますので、ご紹介します。

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

上記はimgタグの中にalt属性が不足している状態で現れるエラーです。この場合はalt属性を追加してください。

エラーコード例：alt属性がないのでエラーが出る

<img src=”forest.png”>

修正例：alt属性を付け足す

<img src=”forest.png” alt=”森の中”>

Stray end tag 〇

上記の〇にはタグ名が入ります。開始タグがないのに、終了タグが入力されている状態で現れるエラーです。このエラーが表示されたら、開始タグの有無と階層構造に間違いがないかを確認してください。

エラーコード例：終了タグのみ入力したためエラーが出る

</div>

修正例：開始タグ<div>を適切な場所に入力する

<div>
</div>

 Duplicate ID ○○

上記の○○にはID名が入ります。IDが重複しているというエラーです。HTMLファイル内の複数タグに同じIDを設定することはできません。
エラーコード例：2つのpタグに同じid名「ty」がついているため、どちらかのidを別の名前にする必要がある

<p id=”ty”>
<p id=”ty”>

修正例：id名が重複しないように変更する

<p id=”ty”>
<p id=”tz”>

The value of the for attribute of the label element must be the ID of a non-hidden form control.
label

上記の場合、タグのfor属性とinputタグなどのidが結びついていない状態で表示されます。例えば、labelとinputタグをforとidで結び付けたつもりでも、以下のようにスペルミスをしている場合に現れます。
エラーコード例：labelのfor属性とinputのid属性が一致していない

<label for=”question”></label>
<input id=”quest”>

修正例：labelのfor属性とinputのid属性を一致させる

<label for=”question”></label>
<input id=”question”>

Attribute 〇 not allowed on element ● at this point.

上記は、〇という属性が●というタグでは使えない場合に出現するエラーです。例えば、<div id=”a”>と入力したつもりで、<div i=”a”>とスペルミスをしていた場合に表示されます。
エラーコード例：id属性のスペルミス

<div i=”a”>

修正例：iという属性はdivタグでは使えないため修正

<div id=”a”>

なお、よくあるエラーメッセージについては Markup Validation Serviceの中でも解説が行われています。参考にしてみると良いでしょう。

エラーが多い場合はHTMLのバージョンをチェック

エラーがあまりにも多い場合は、HTMLのバージョンが間違っているのかもしれません。

HTMLは時代とともに変化しており、バージョンによって書き方は違ってきます。最新のHTMLはHTML5です。Markup Validation ServiceでHTMLファイルを検証するには、まず冒頭のDOCTYPEでファイルのHTMLタグがどのバージョンのHTMLで書かれているのかを宣言する必要があります。

ファイルの冒頭に以下のように書くことで、HTML5の宣言が可能です。

<!DOCTYPE html>

また、オプションでもHTMLバージョンの設定が可能です。「More Options」の「Document Type」からHTMLのバージョンを設定してください。

CSS Validation Serviceの使用方法

次にCSS Validation Serviceの使用方法を説明します。使い方は大体Markup Validation Serviceと同じですが、こちらはCSSコードの文法をチェックできます。

CSS Validation Serviceにアクセス

まずは、CSS Validation Serviceにアクセスします。こちらのページは日本語版ですので、使い勝手が良いです。

URLによるチェック

「URLを指定」タブをクリックし、アドレスインプットボックスの中にCSSコードの検証をしたいURLアドレスをペーストします。最後に下部の「検証する」をクリックします。

ファイルアップロードによるチェック

「アップロード」タブをクリックし、「ファイルを選択」から検証したいファイルを読み込みます。なおCSSファイルだけでなく、CSSコードが含まれているHTMLファイルでも検証することができます。
例えば、HTMLコードの中に<style>タグでCSSコードを記載している場合もあるでしょう。このようなケースでも、<style>タグの中のCSSコードを検証をすることができます。

コードを直接入力してチェック

「直接入力」タブをクリックし、テキストエリアに直接CSSコードを打ち込みます。ファイル読み込みの場合と同様、HTMLコード内に書かれたCSS文法をチェックすることもできます。

CSSのバージョン設定

HTMLファイルの場合、DOCTYPE宣言でバージョンを表すことができます。一般的にHTMLファイルの冒頭にはDOCTYPE宣言がつきものですので、自動でバージョン判定されることが多いです。

一方、CSSファイルの場合は、ファイル内にバージョン判定ができるコードを入力しません。そのため、検証を始める前にCSSのどのバージョンで文法チェックを行うのか、あらかじめ設定しておくことが重要です。「オプション」→ProfileからCSSのバージョンを設定することができます。

エラー0の場合

チェック後に画像のような緑色のメッセージ「おめでとうございます！エラーはありません」と表示されれば、CSSコードのエラーは存在しません。

チェック後にエラーの表示が出た場合

次に、エラーが発見された場合の対処方法を見ていきましょう。

エラー画面の見方

エラー画面には、次の3つが表示されます。

• エラーを起こした行数
• エラーコードに関連するセレクタの名称
• エラーの詳細

これらを手掛かりに、エラーを修正していきます。

よくあるエラー画面

プロパティ ○○ は存在しません

プロパティとして使えないコードが入力されているときに表示されます。プロパティのスペルが間違っているなどが原因です。

エラーコード例：font-colorというプロパティは存在しない

.ai {font-color:white;}

修正例：文字の色を設定する正しいプロパティcolorに修正する

.ai {color:white;}

次のプロパティが正しくありません : width length には 0 だけが使えます。数字の後には単位を入れる必要があります。

単位を指定しなければならないCSSプロパティで、単位を無視するとこのエラーが現れます。

エラーコード例：widthでは数字に単位を付ける必要がある

.ai {width:200;}

修正例：文法解析エラーが発生しました

.ai {width:200px;}

Lexical error at line ●, column 〇.

●行〇列に何らかの字句エラーが発生しているという内容です。例えば、クラス指定のための「.」を落としていた場合などに表示されます。明確にどんなエラーであると表示されるわけではないので、行数や列数を手掛かりにおかしなところはないかをよく見直してみましょう。

エラーコード例：クラス指定のための「.」が重複している

.ai {color:white;}

修正例：クラス指定の「.」を1つにする

.ai {color:white;}

プロパティ ○○ は CSS レベル 2.1 に存在しませんが、[css3] に存在します

CSS3のプロパティを使っているにもかかわらず、CSS2.1のバージョンで検証を行っていたため発生したエラーです。オプションのCSSバージョン指定を見直してください。

エラーコード例：border-radiusはCSS3から使えるプロパティ

.ai {border-radius:10px;}

修正例：同じコードでもCSSのバージョンをCSS3にしてから検証するとエラーがなくなる

なお、CSS3に使われているプロパティすべてにこの表記が出るわけではなく、バージョンの違うプロパティは別種のエラーとされてしまうこともあります。エラーが多すぎる場合は、バージョン設定を確認しましょう。

まとめ

W3Cの文法チェックツールでは、すでに公開されているWebページ・ファイル・直接入力の3つの方法でコードが正しく入力されているかを検証することができます。検証結果画面ではどの部分にエラーがあるのかを明らかにしてくれますので、これを手掛かりに修正を行ってください。

なお、検証を行う前にHTML・CSS各バージョンの設定をしっかり行うことをお勧めします。