このページの先頭です
ここから本文です 実践ノウハウ

XHTMLは難しくない
-大藤 幹の『Web標準の基礎知識』 第2回

テーブルレイアウト時代の前提と常識

少し前までは、ホームページ作成ソフトの宣伝文句と言えば、「HTMLの知識は一切不要!」「ワープロ感覚で簡単に!」のようなものが多かったように思います。しかし、最近ではそのような表現はあまり使われなくなってきました。なぜなら、そのような宣伝文句はWeb標準を前提として考えると、明らかにそのソフトの弱点を示すものだからです。

まず、そのような宣伝文句は「HTMLは難しい」ということを前提としています。テーブルレイアウトで作られたページのソースコード見れば、誰でもそう思うのが当然でしょう。たしかに、あのようなタグを付ける作業を人間がやる必要はありませんし、その方法をおぼえる意味もないと言えます。しかし、それは逆に言えば「テーブルレイアウトをするから、HTMLが難解になっている」ということでもあるのです。つまり、HTMLを長く複雑で難しいものにしているのは、テーブルレイアウトを採用しているソフト自身だということです。

次に、上記の宣伝文句には「ワープロ感覚で作れることはいいことだ」という考え方が根底にあるように思います。でもちょっと待ってください! ワープロは最終的に紙という形の決まったものに出力することを目的としたソフトです。それと同じつもりで作ってしまうと、ホームページも同様に形の決まったもの、つまり様々な環境に応じてフレキシブルに変化できないものになってしまいます。逆に言えば、「ワープロ感覚で作ろうとするから、特定のブラウザでしか見ることのできない固定的なページになってしまう」のだということになります。

テーブルレイアウトとの大きな違い

Web標準でのホームページ作成では、環境に依存しないで閲覧可能となるような、つまり閲覧環境に合わせてそれにふさわしい状態に変化できるようにするための「構造を示す」という作業を避けて通ることはできません。そして、その構造を示すために使用するのが(X)HTMLのタグです。文書構造は、現在のところコンピュータが自動的に判別することはできませんので、人間が判断して適切なタグを付ける必要があります。さらに言えば、現在のところは、(X)HTMLでどのようにタグがつけれらているのかがわからなければ、CSSを指定することも難しくなります。Web標準のホームページを作るには、「(X)HTMLの知識」を持つ必要があり、さらにワープロにはなかった「構造を示すという作業工程」が必要になるのです。

構造を示すタグをつけるのは超カンタン!

しかし、だからと言ってWeb標準のホームページ作成が難しいわけではありません。テーブルレイアウトのようにタグで表示指定をするわけではないので、使うタグの種類も数も大幅に少なくなります。構造を示すタグをつけると言っても、基本は<body>~</body>の間にある内容をブロックレベルと呼ばれる種類の要素を示すタグで囲うだけです。XHTML1.0(Strict)で言えば、ブロックレベル要素は全部合わせてもたったの13種類しかありません。そのうち、頻繁に使われるものは見出しや段落、箇条書きを表すタグなど、わずか数種類だけです。この段階の作業においては、どう表示されるかなどは一切考える必要はなく、数種類のタグの中から該当するものを選んで付けるだけの単純作業なのです。

そのような基本的なタグを覚えるだけなら、下の表を見るだけで、今すぐにでも可能ではないでしょうか。一般的なページであれば、<body>~</body>の範囲はこれらのタグを使うだけでほぼOKです。あとは必要に応じてタグ辞典などを参照すれば構造を示すタグ付けは誰にでも簡単にできます。新しいソフトの使い方を覚えるよりタグを覚える方が簡単だと言う人もいるくらいです。

Web標準のサイト制作で使用される主要なタグ: ブロックレベル要素には、見出しのh1~h6要素、段落のp要素、箇条書きのul要素・li要素、グループ化や任意の範囲を示すdiv要素などがある。そして、インライン要素には、リンクのa要素、画像のimg要素、強調のem要素、などがある。

とはいえ、実際にはタグをつけた後にCSSを指定するという作業があります。これに関しては、XHTMLのタグを付ける作業よりは、はるかに難しいものとなります。また、CSSでレイアウトを行うために、少々タグを追加する必要も出てきます(ただし、CSS上級者であればあるほどXHTMLはシンプルな状態を維持できます)。次回は、そのCSSについて説明します。

筆者プロフィール

写真:大藤幹

大藤幹(おおふじ みき)
ZSPC代表。札幌市在住。1996年よりWebの基本技術に関する書籍の執筆を開始し、2000年に独立。現在は、XHTML+CSS、Webアクセシビリティを中心としたテクニカルライティングのほか、セミナー講師、Webサイトの制作やコンサルティングなど多岐に渡り活動している。主な著書は、『詳解HTML&XHTML&CSS辞典 改訂版』(秀和システム)、『世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル』(毎日コミュニケーションズ)など。雑誌Web Designingにて『CSS Analysis』を長期連載中。

大藤 幹の『Web標準の基礎知識』

このページの先頭へ▲