REDLINE MAGAZINE | バリデータの使い方・見方

バリデータの使い方・見方

先日のエントリ「CSSとうまく付き合う予備知識」でバリデータについて書いたので、もう少し責任をもってバリデータの見方について説明してみる。

>>W3C Markup Validation Service
>>W3C CSS検証サービス

まず理解すべき事は正しい文書であると確認された場合、緑色になり、逆にエラーがある場合は赤色になるという事。 緑の場合は正しいので、そのままでOK。赤の場合はエラーがでている部分を修正していく必要がある。

左がエラーなし、右がエラー有りの画面。

肝心の使い方について、W3C Markup Validation Serviceの場合、下記のような画面で、3つの検証方法が用意されている。１つ目は現在どこかのサーバー上に置かれているファイルを検証するための入力フォーム。２つ目はローカルファイル(自分のパソコンの中のファイル)の検証用、３つ目はソースコードを貼り付けて検証するための入力欄、となる。

エラーの出ている箇所は「Line ●●」のように何行目にエラーがあります、と教えてもらえるのでその周辺を見直せばOK。また複数エラーが出ている場合でも、1つ間違った部分があってそれに釣られて他の部分がエラーとして表示されている場合もあるので、最初は上から順番に確認していく方がいい。

「Line ●●」の横に太字で書いてあるのが何がエラーなのかを表す文。
英語なので最初はとっつきにくいが、だいたいひっかかるパターンは限られてるのでこういうエラー表示がされた時はこう修正するというのを覚えていけると思う。下記にW3C Markup Validation Serviceのよくあるエラー文と意味、解説を書いてみる。

●document type does not allow element "p(タグ名)" here;...略
上記エラー文の場合意味としては「ここにpの開始タグを置くことは許されていません」という事。その後ろにいろいろタグが並んでいる場合もあるが、そういう時は「こういうタグの開始タグが見つからないよ。本当はそのタグの中に入ってるべきものじゃないの?確認してみてね」というアドバイスのようなものだと思えばいい。まぁその後半部分はあまり当てにならない場合も多いのだが、肝心なのは「does not allow element "タグ名" here」の部分。とにかくここではpタグの位置がおかしいらしいのでその辺りを確認しようという思考の流れにする。

pタグで言えばたいがいpタグ(ブロックレベル)の外にaタグ(インライン)が飛び出してる等入れ子の関係がおかしい時なんかにこの表示が出る事が多い。 上の場合は開始タグの事を言っているが、終了タグの位置がおかしい場合は「end tag for "タグ名" omitted, but OMITTAG NO was specified.」というような表示が出る。こういう場合も入れ子関係を見直せばいい。

●required attribute "alt" not specified.
これは修正が一番簡単。その行番号に置かれている画像のimgタグに対してalt属性を指定していないぞというお知らせ。alt属性をちゃんと指定すればOK。

●there is no attribute "BACKGROUND(属性名)".
意味は「あなたが指定したこの属性ですけど、あなたの書いてる文書内でそのタグにその属性つけたらダメなんですよね。(CSSの方でコントロールしてね)」ということ。 どういう時にこのエラーが出るかというと、例えばbodyタグ内にマージンを属性として指定したり、tdタグに対して直接background属性を指定したりした時など、その文書ではそういった部分の指定はcssで行うべきなのに、htmlソース内に書いちゃったときなんかによく出てくる。

ソースの意味を考えずソフトを使ってササっと済ませた場合なんかはこういう部分が甘くなるケースが過去に多々あったのでソフト依存制作をしている方はよく出会うエラーかもしれない。

●end tag for "img(タグ名)" omitted, but OMITTAG NO was specified.
「xhtmlを書いてるのに、終了タグが省略されていますよー。直してね。」という意味。xhtmlの場合は終了タグの省略はできない。「htmlとxhtmlの違い」 という記事の中でも書いたが、htmlの時に閉じタグを省略してもよかったタグ(img、br、inputなど)をxhtmlに変更しようとしてたけど、うっかりここ直し忘れてたなんて事もよくある。

●その他
他によく出てきそうなエラーあるかな･･･。思い出したらまた追記します。実際は上記以外にもっといろいろエラー内容がある。基本的に英語なので、訳せばエラー内容はなんとなく分かると思う。とりあえず使ってみてから･･･の話。英語が苦手な方はオンラインの翻訳サービスなんかを利用してもいいと思う。CSSの方も文法違反がある場合、同じような感じで行番号とエラー文を返してくれるので、意図して(ハック目的等で)文法に沿わない記述をしている部分以外はキチンと修正しておく。でないといつか表示がおかしいぞという罠に沈没する。

2007年03月07日 17:40 | Red | パーマリンク