XHTML、CSS を学ぶ時の 6つの間違い

XHTML、CSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりも XHTML でしょということでタイトルや本文内では XHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。

1、とりあえず Dreamweaver を買ってくる

別に「Dreamweaver」だけに限らず、オーサリングツールさえ手に入れれば XHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま「オーサリングツールが使える = XHTML を理解している」だと思い込んでいると後になって困ることになると思いますよ。

オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTML、CSS に関するしっかりとした知識を持った上で使いこなせれば非常に有益なツールですが、そうでない場合は、なまじツールのおかげでブラウザでの見た目だけに関しては問題ないものが簡単に作れてしまう分、逆に自分自身のスキル不足に気が付くのを遅らせる原因にもなります。

個人的な意見ですが、「Dreamweaver」を買うお金があるなら、最初はそのお金で「Fireworks」を買った方がいいんじゃないかなと思います。いや、別に Fireworks じゃなくてもいいんですけどね。Web サイト制作を始めるにあたって最初に購入するべきソフトとしては、きちんとした画像編集ソフトの方をオススメしますよということです。

最初はテキストエディタで手打ちしろと。そのかわりテキストエディタはきちんとしたソフトを用意しましょう。（個人的には Win なら「秀丸エディタ」がオススメですが）

2、間違った参考書を買ってくる

最近の書籍にはさすがに見かけなくなったのですが、数年前の HTML 関連参考書には、「<p> タグは 1行改行するためのタグです」とか、「<h1> ～ <h6> タグは文字を太字にして大きくするためのタグです」なんて説明を普通にしてある書籍があったものです。（これを見ておかしいと思わない場合は、ちょっとヤバイかも ※1）

では、XHTML や CSS を学ぶときに最も確実な参考文献は何なのかと聞かれれば、それは「W3C の仕様書を見ろ」ということになります。もともと、XHTML、CSS の標準仕様を策定しているのが W3C ※2 なのですから、その仕様書が最も信頼のおける文献であることは当然です。そもそも世の中の参考書は、すべてこれを基に書かれているわけ（はず）ですからね。

でも仕様書は英語だし、、という人にオススメの書籍を挙げるとすれば、XHTML 関連では神崎正英氏の「ユニバーサルHTML/XHTML」、益子貴寛氏の「Web 標準の教科書」、CSS 関連では「セオリー・オブ・スタイルシート」あたりがよろしいかと。

それでも W3C の仕様書は必ず目を通しておくべきものですよ。

3、W3C の仕様書を読まない

上の（2）でも触れましたが、XHTML、CSS を学ぶにあたって、W3C の仕様書を読まないなんていうのは、本来であれば問題外なんですが、原文が英語だったりすることもあってなかなか簡単ではないのも事実。こんなこと書いている私にしたって、「じゃあ、お前は仕様書を熟読して完璧に頭に入れているか？」なんて問われればそんなことはないわけです。

それでも仕様書を読まないという選択肢は「なし」だと思っていて、これは例えて言うのなら、ある音楽バンドの曲をコピーするときに、そのバンドの演奏を一切聴かずに、他のコピーバンドの演奏を手本にするようなことをする人はいないでしょと、そういうことです（どういうこと？）。

まあ、英語だということで毛嫌いしないでまずは目を通してみましょう。大して難しい英語は使われていないので、そんなにビビることはないと思います。あとは、上で挙げた参考書と仕様書を照らし合わせてみることでなんとなく仕様書の内容も理解できたりするかもしれません。

ちなみにボランティアの方々によって一部日本語版のドキュメントも公開されています。

4、CSS から学び始める

これ、意外に理解していない人がいるのですが、XHTML がすべての基本です。CSS は XHTML で文書構造を定義されたものに対してスタイル（見た目）を定義するもので、どちらが主で、どちらが従かは明白です。

確かにデザインと直結する CSS のお勉強はクリエイティブな感じで魅力的なのでしょうが、CSS を用いる大きな理由のひとつが、XHTML （文書構造）と CSS （デザイン）の分離を行い、XHTML の相互運用性や再利用性を高めることだと考えると、問題のある XHTML にいくら CSS で見た目だけ適用したところで本末転倒ということになります。

まずはしっかりとした XHTML コーディングができるようになってから CSS のお勉強に入りましょう。

5、文法チェックツールで 100点なら完璧だと思ってしまう

W3C の、「Markup Validation Service」や「Another HTML-lint gateway」など、XHTML の文法をチェックするツールはいくつかありますが、これでチェックして問題がなければ XHTML は完璧と考える人がたまにいます。

ところが、残念ながら「文法チェックで減点がない = XHTML 的に間違いがない」は必ず成り立つとは限りません。

例えば下記の 2つの XHTML 文書を「Another HTML-lint gateway」でチェックすれば、両方とも 100点という結果が帰ってきます。

ひとつ目はこれ

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>XHTML Sample #01</title>
<link rev="made" href="http://example.com/" />
<link rel="index" href="index.html" />
</head>
<body>
<h1>○○に関する考察</h1>
<h2>実験内容の一覧</h2>
<ol>
<li>○○の□□実験</li>
<li>□□の△△実験</li>
<li>△△の××実験</li>
</ol>
<h3>○○の□□実験に関する結果</h3>
<p>今回の実験は...</p>
</body>
</html>

もうひとつはこちら

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>XHTML Sample #02</title>
<link rev="made" href="http://example.com/" />
<link rel="index" href="index.html" />
</head>
<body>
<p class="h1"><strong>○○に関する考察</strong></p>
<p class="h2"><strong>実験内容の一覧</strong></p>
<div class="list">
<p>1. ○○の□□実験</p>
<p>2. □□の△△実験</p>
<p>3. △△の××実験</p>
</div>
<p class="h3">○○の□□実験に関する結果</p>
<p>今回の実験は...</p>
</body>
</html>

どちらも 100点ですが、どちらの XHTML が文書構造的に正しいでしょうか？マークアップの仕方について多少の意見の差はあるかもしれませんが、普通に考えればひとつ目のサンプル（XHTML Sample #01）を正しいとするのが妥当でしょう。

文法チェックツールは、あくまで「文法的に間違っていないか」を見てくれるだけで、各マークアップが文書構造として正しいかまではチェックしてくれません。これを理解していないと永遠に「木を見て森を見ずな人」という烙印を押されたままになります。

6、1～5が当てはまる人に教わる

不幸すぎます。誰かに教えてもらいたいなら師匠は慎重に選びましょう。

※1
p (paragraph) 要素はその名の通り「段落」を定義するものであり、h (heading) 要素は「見出し」を定義するための要素です。各要素は、「ここは段落です」あるいは「ここは○番目に大きな見出しです」といったことを示しているだけであり、それに対して 1行改行して空行を作ったり、文字の大きさを変えたり、太字にしているのは各ブラウザが勝手に行っていることなのですから、先の例に挙げたような説明を書いた人は、HTML の根本が理解できていないことが明白です。

※2
W3C が策定している仕様書に拘束力はありません。ですが、みんなが利用しやすいように Web 標準に則って作っていこうよという世界的な流れの中で、W3C の仕様書を無視して XHTML や CSS を記述するのは現実的ではないでしょう。