BOOKS
by Sukeharu Kano / 狩野祐東 著書

HTMLやCSSの書き間違いをチェックする「バリデーションサービス」

2016-06-27

「HTMLやCSSをちゃんと書いたはずなのにうまく表示されない」ということがよくあります。HTMLやCSSをたくさん書いているとそのうち勘どころがつかめてきて、どこが間違っているのかわかるようになってきますが、慣れないうちは大変です。

もちろん、タグやCSSの綴りを間違えることはよくありますが、それ以外に、見つからない書き間違いで多いのは次のようなものです。

  • 記号(<、>、=、")を入力し忘れた。または全角で入力した
  • スペースを半角ではなく全角で入力してしまった
  • CSSのコロン(:)やセミコロン(;)を入力し忘れた

とはいえ、これらの打ち間違いを見つけるのは簡単ではありません。そこで、ページが「思ったように表示されないなあ」というときは、HTMLやCSSのバリデーションサービス(検証サービス)を使うことをおすすめします。

HTMLバリデーションサービス

HTMLの仕様を策定しているW3Cが提供するバリデーションサービスがあります。

https://validator.w3.org/

英語で書かれていますが、日本語のHTMLもチェック可能。「Validate by File Upload」タブをクリックして、作業中のHTMLファイルを選んでアップロードします。

HTMLバリデーションサービス

HTMLバリデーションサービス

HTMLに何かエラーがあるときはこのように表示され……

HTMLに間違いがあるとき

HTMLに書き間違いがあるとき

エラーがすべてなくなればこのように表示されます。

HTMLにエラーがないとき

HTMLにエラーがないときはこのように表示される

CSSバリデーションサービス

HTMLバリデーションサービス同様、W3CはCSSバリデーションサービスも提供しています。CSSバリデーションサービスは日本語に翻訳されています。

https://jigsaw.w3.org/css-validator/

使い方はHTMLバリデーションサービスとほぼ同じです。

CSSバリデーションサービス

CSSバリデーションサービス

狩野 祐東

Web/アプリケーションUIデザイナー、エンジニア。執筆家。 アメリカ・サンフランシスコに留学、UIデザイン理論を学ぶ。Webサイトやアプリケーションのデザイン・開発、関連技術書籍の執筆を数多く手がける。株式会社Studio947代表。

BOOKS by 狩野祐東