文法チェッカーで正しい(X)HTML/CSSを書こう-独学!未経験からWebデザイナーになる!!

文法チェッカーで正しい(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
HTML5や、上記URIにアクセスできない場合はこちら：http://www.htmllint.net/html-lint/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 CS5から、残念ながらこの機能が省かれてしまいました。

意外や意外、実は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点満点にできる力は身につけておくといいですね。特に就職活動用に使う実績サイトは、採用側がチェックすることもありますので高得点にしておきましょう。

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。

独学！未経験からWebデザイナーになる！！

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

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

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

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

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

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

amorphis さん　2013年10月29日11時54分

馬場誠さん、お久しぶりです、
今htmlとcssの勉強をしているのですがしょっぱなから躓いています。
ここで質問するのは場違いなのかもしれませんが、
お力になってくれれば幸いです。



ｈｔｍｌに外部cssを適用させてh1の文章にcssを適用させたのですが、
何故だか文字化けが出ます。

ソースを書いておきます。

html側　index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>index</title>
</head>
<body>
<h1 class="headding01">見出しタイトル1 title</h1>

<br>
</body>
</html>

css側　css.css

.headding01 {
margin:0 0 30px 0;
padding:12px 10px;
border-left:5px solid #1871B8;
background: #1D8ADE;
color:#FFF;
}

です。

http://blog.3streamer.net/html5-css3/css3-styling-231/
ここのサイトをコピペしただけなのですが文字化けします。

私が考えた理由は

htmlの宣言文が間違っている

htmlの<h1>要素の置き場所が間違っている。

これくらいでしょうか。

それとcss3はhtmlの宣言文にしなければならないと
言うような事が書いてあったのですが
そうしなければならないのかな？
と思ったりするのですがどうなのでしょうか？

それはともかく、まずは、この文字化けの原因は
何なんでしょうか？

馬場誠さん　2013年10月30日20時26分

amorphisさん、こんばんは。

文字化けは、Webクリエイターを目指す人の誰もが経験する＆慣れるまで解決に苦労する部分です。答えをそのまま書いてしまうよりも、ご自身で問題解決にチャレンジされた方が力になると思いますので、ここではヒントになるページをご案内します。

当サイトの下記ページに文字化けについて記事を書いていますので、読みながら解決にチャレンジしてみてください。

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

おそらくは、上記ページに書かれていることが問題と思いますので、ご覧になればきっと解決できると思いますよ☆（もしできなければ、そのときは改めて上記ページからコメントいただければと思います）


あともう一点、CSSも気にされているようですが、今回は無関係と思います。CSS3も、宣言を気にせず使って大丈夫です。

Web制作Tips: デザイン; ├フリーの写真素材を有効活用しよう; ├デザイナーならこだわりたいカーニング（文字詰め）; ├文字のジャンプ率で適切なサイトイメージを演出する; ├TPOを考えてハズさないフォントを選ぶ; └失敗しない配色の基本; ユーザビリティ; ├そのフォントサイズ、適切ですか？; ├リンクテキストをわかりやすくする; ├フォームのリセットボタンを考える; ├リンク切れ時に適切な404ページを表示をする; └フォームの確定ボタンは右?左?; コーディング; ├文法チェッカーで正しい(X)HTML/CSSを書こう; ├インデントで読みやすいソースコードを; ├文字化けを防ぐ&解消する方法; └背景画像ありのボックスの文字をはみ出させない方法; その他; ├ディレクトリ構造は適切に; └絶対パス?相対パス?ファイルの指定方法いろいろ

ホームページへ戻る

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