ホームページ文法チェッカーで正しい(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
こちらは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点満点にできる力は身につけておくといいですね。
Web制作Tips- デザイン
- ├フリーの写真素材を有効活用しよう
- ├デザイナーならこだわりたいカーニング（文字詰め）
- ├文字のジャンプ率で適切なサイトイメージを演出する
- ├TPOを考えてハズさないフォントを選ぶ
- └失敗しない配色の基本
- ユーザビリティ
- ├そのフォントサイズ、適切ですか？
- ├リンクテキストをわかりやすくする
- ├フォームのリセットボタンを考える
- ├リンク切れ時に適切な404ページを表示をする
- └フォームの確定ボタンは右?左?
- コーディング
- ├文法チェッカーで正しい(X)HTML/CSSを書こう
- └インデントで読みやすいソースコードを
- その他
- ├ディレクトリ構造は適切に
- └絶対パス?相対パス?ファイルの指定方法いろいろ
