(X)HTML/CSSの文法チェッカー

文法チェッカーで正しい(X)HTML/CSSを書こう

正しい日本語というのは、たとえ日本人であっても難しいことです。同じように、正しい(X)HTMLやCSSを書くのもなかなか難しいこと。それはプロのWebデザイナーにとっても例外ではなく、完璧に正しい(X)HTMLやCSSを、何のサポートも無しに書くのは難しいものなのです。

そんな(X)HTMLやCSSですから、学習中の皆さんにとっても「自分の書いている(X)HTMLやCSSはこれであっているのかなぁ」と不安に思いながら書いている方も多いのではないでしょうか。

そんな方に使っていただきたいのがこのページで紹介するツールです。文法が正しいかどうかの質問に答えてくれる、便利なツールがあるのです。それらは(X)HTML/CSS文法チェッカーや(X)HTML/CSSバリデーターなどと言われ、これを使えば誰でも簡単に(X)HTMLやCSSの文法チェックができます。中にはかなり細かく指摘してくれるものもあるので、正しい(X)HTMLやCSSを書く強い味方となってくれるでしょう。

しかもこれらはプログラムでできていますから、人と違って何度使ってもいやがられることもありません(笑)。ありがたく有効活用しましょう！それでは一つずつ紹介していきますね。

Another HTML-lint

URI:http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

Another HTML-lintは、Webデザイナー御用達ツールとも言える、最も定評がある(X)HTML文法チェッカーです。作者さんのページにて、オンラインで簡単に文法チェックをすることができます。結果は点数で表示され、100点が満点。最低はマイナス点もあります。懐かしい話ですが、私が始めてチェックしたときはたしかマイナス点でしたね(笑)

細かく文法をチェックできるだけでなく、正しくないところにきちんとした解説があるので、メッセージをもとに修正していけば正しいHTMLを書く学習にもなるでしょう。私が最もお勧めする、極めて有用な(X)HTMLチェッカーです。（なお余談ですが、当サイトは厳密にチェックしていませんのであしからず^^;）

Markup Validation Service

URI:http://validator.w3.org/

こちらはWWWで利用される技術の標準化をすすめるW3Cが提供する(X)HTMLチェッカーです。英語なのでちょっと見づらいかもしれませんが、なんと言ってもW3Cが提供するものとあって、よく利用されているようです。

Dreamweaverのバリデータ

意外や意外、実はDreamweaverにも標準で便利な(X)HTMLバリデータがついています。[ ウィンドウ]→[ 結果 ]パネルを開き、上のスクリーンショットの赤丸部分にある[ バリデータ ]→[ 左端の矢印クリック ]からバリデートできます。

便利な点は、現在のドキュメントをバリデートできるのはもちろん、Dreamweaverで定義したサイト内一式をまとめてバリデートできる点。これはとても便利です。とは言っても、(X)HTMLを書いてその場でバリデートできる、その手軽さが一番のメリットと言えるでしょう。

ただし込み入った判定はできないので、あくまでも簡易的なものとして、Another HTML-lint等の補助的に使うとよいでしょう。

Markup Validation Service

URI:http://jigsaw.w3.org/css-validator/

こちらはCSSの文法チェッカーです。W3Cが提供するものとあって、信頼性は抜群。(X)HTML版とは異なり、なぜか日本語のインターフェイスなので使いやすいです。私もCSSはこちらをメインに使用しています。CSSはタイプミスがあると気がつきにくいので、そういったミスを発見する際にも便利ですよ。

完璧でなければダメ！？

こういったサービスがあると、ついつい完璧でなければダメだと思われるかもしれません。しかし、Webサイトを作る際はいろいろな事情があり、あえてチェックに通らない作り方をすることもあります。事実、大手ポータルサイトをAnother HTML-lintでチェックすると、意外に点数が低かったりもするんですよ。

ですから、あくまでも指標として用い、100点満点でなければ絶対にNG、とまでは考えなくてもOKです。ただし、必要時にはいつでも100点満点にできる力は身につけておくといいですね。

 

コメント

唏沢 さん　2012年01月13日14時59分

はじめまして。唏沢と申します。

簡潔にまとめられていて、良かったです。

もっと読みやすく　するために
適当なところで改行して頂くと
嬉しいです。

馬場誠 さん　2012年01月14日12時29分

唏沢さん、はじめまして。
ありがとうございます。改行は自分なりにPタグ任せでしているつもりですが、今後肝に銘じておきますね。

Web制作Tips

デザイン

├フリーの写真素材を有効活用しよう

├デザイナーならこだわりたいカーニング（文字詰め）

├文字のジャンプ率で適切なサイトイメージを演出する

├TPOを考えてハズさないフォントを選ぶ

└失敗しない配色の基本

ユーザビリティ

├そのフォントサイズ、適切ですか？

├リンクテキストをわかりやすくする

├フォームのリセットボタンを考える

├リンク切れ時に適切な404ページを表示をする

└フォームの確定ボタンは右?左?

コーディング

├文法チェッカーで正しい(X)HTML/CSSを書こう

├インデントで読みやすいソースコードを

├文字化けを防ぐ&解消する方法

└背景画像ありのボックスの文字をはみ出させない方法

その他

├ディレクトリ構造は適切に

└絶対パス?相対パス?ファイルの指定方法いろいろ