Articles

HOME > Articles > [Technical] Study of Valid Web authoring with mothice's taste

もっちー流正しいWeb制作指南

はじめに

とにかく誤解されることが多いインターネット技術。そのなかでももっともひどい状態にあるのがHTMLとスタイルシートの書き方ではないでしょうか。世間ではHTMLやスタイルシートを書くことは簡単だと思われていますが、ぼくはHTMLやスタイルシートを書くことは簡単ではないと考えています。HTMLやスタイルシートはとっつきやすいものではあるとは思いますが、そのとっつきやすさが災いして、簡単であると誤解され、軽視されています。

まず、HTMLには文法がある(正しい書き方が存在する)ことを知らないWeb制作者が大勢います。また、世の中に出ているHTMLの解説書の90%以上が嘘ばかりであることも知られていません。さらに、世の中のほとんどのHTMLエディタやワープロなどが間違ったHTMLを生成することも知られていません。スタイルシートも間違った使われ方が氾濫しています。

こういった事実を憂慮して、たくさんの有識者の方々が、すぐれた「正しいHTMLやスタイルシートの書き方」をWebで公開しておられます。ぼく自身も、このWebサイトを公開するに当たって、さまざまなページを参考にさせていただきました。

ぼくはそのような有識者の方々には遠く及ばず、XMLやSGMLの知識も不十分です。しかし、少しでも多くのWeb制作者の方に正しいHTMLとスタイルシートを知っていただこうと思っています。そこで、世の中で多く行われているSGMLなどの文法をベースにしたものではなく、「べし・べからず集」のような形式で、もっちー流のWeb制作指南として公開しようと思います。

つまり、以下にあげることを参考にしていただければ、正しいWebが制作できるのではないかと思うのです。なお、この中には文法的には必ずしもそこまでしなくてもよいが、やった方がいいという程度のことも含まれています。

あきらめた方がよいもの

• スタイルシートをサポートしないブラウザで見ると「6年前のWebページ」みたいに見えてしまうこと→body要素で前景色(color)や背景色(bgcolor)、リンクの色(link)の属性を指定するのはやめて、スタイルシートで指定するようにしましょう。
• スタイルシートをサポートしないブラウザで見ると、リンクを張っている画像の周りにリンクの線が出てくること→border属性は「見た目」を規定する属性であり、使うべきではありません。スタイルシートを用いるようにしましょう。
• テーブルを使ってレイアウトを整えること→テーブルを「表形式でのデータの表現」以外に用いるべきではありません。ページ全体の余白などはスタイルシートでbody要素に対して指定すれば実現できますし、ページを2段組にしたいような場合はCSS2(の以前CSS-Positioningと呼ばれていた部分)を用いれば安全に、かつもっと多彩なデザインが可能です。
• 古いバージョンのブラウザで見ても、最新のバージョンのブラウザと同様に表示されるようにすること→レイアウトのためにtable要素を用いることが多くなり、そのためにテーブルをサポートしないブラウザでは正しく表示されなくなります。また、そのようなページはテキストしか表示できないブラウザでは読むのが困難になり、結局どんなブラウザでも同じように見せるという目的は果たされないことになります。
• どんな環境でも同じように見えることを期待する→これは、事前に予測することは難しいのですが、例えばCSSでは、ユーザが自分の好きなスタイルシートをブラウザに指定して見ることができ、しかもそのスタイルシートは、Web制作者が指定したものより優先されます。このため、Web制作者が指定したスタイルシートに依存したデザインにするべきではありません。
• ページの切り替え効果や、スクリプトを用いて、あっと驚くような仕掛けをする→そんなことしても、驚くのは1度きりで、しかもほんの数秒でしかありません。その仕掛けのために他に弊害がある(反応が遅くなっているなど)なら、それは逆効果でしかありません。
• トップページ(そのサイトで、最初に表示されるページ)のど真ん中に大きな画像が1つだけあって、実際にコンテンツを見ようと思ったらその画像をクリックするほか手段がない→画像が表示できないブラウザでは手も足もでなくなる危険があります。
• 極彩色のWebサイトを作ること→これも、相手の環境によっては負担を強いることになります。みんなが24bitフルカラーをサポートした1024×768ドットのディスプレイで見ているわけではありません。今でも廉価なノートパソコンは、800×600ドットで16bitカラーしかサポートしていないものも売られています。
• Internet Explorerに特化したWebサイトを作る→気持ちはよくわかりますが、宗教上の理由からIEを使っていない人も多くいます。あのMicrosoftでさえ、自社のWebページではIE以外のブラウザでも支障がないように努力しているのがよくわかります。少なくとも、Netscape Navigatorで見たときに突然Navigatorが落ちるようなページだけは避けましょう。

心がけた方がよいもの

• 属性値はすべて引用符で囲む。 <img src=top.png>→<img src="top.png">
• タグの要素名や属性名は、すべて小文字で書く。 <IMG SRC="top.png">→<img src="top.png">→HTMLの文法では、要素名・属性名の大文字・小文字に関する規定はありません。しかし、XMLでは要素名の大文字・小文字は区別されます。また、XHTMLでは、HTML4のネームスペースは小文字でなければならないと規定しています。
• 終了タグは書く→終了タグのない空要素(img,hr,br,metaなど)以外は、なるべく終了タグも書くようにしましょう。XML/XHTMLでは、要素はすべて終了タグを持ちます。
• テーブル関連のタグは、その使い方をよく理解して、なるべく丁寧にテーブルを記述する→テーブルの表示は、とにかく遅くなりがちです。なので、なおさらテーブルは濫用するべきではなく、またテーブルを記述するときはテーブル関連のタグを慎重に用いて、少しでも表示を早くしたりユーザの利便性を向上させるよう努力すべきです。HTML4.01には、こうした工夫が盛りだくさんです。また、テーブルをサポートしないブラウザがあることは、常に念頭に置くべきです。
• CSSで、前景色または背景色を指定するときは、どちらか片方だけでなく、両方指定するようにしましょう。親要素(そのブロック要素が乗っている要素)と同じ色を指定するには、transparentを指定します。
• 点滅は使わない→これは、強調に用いられるようですが、ある特定の人々には、発作を起こさせる原因になりうるものです。
• コンテンツの構成の大部分をHTMLで構成するようにする→つまり、HTMLに関しては奇をてらうことなく、オーソドックスなものを用いて、デザインに関してはスタイルシートで凝りに凝る。逆に言えば、スタイルシートを無効にしたときに、そのコンテンツが非常に読みにくいものになるようでは、そのコンテンツは構成の大部分をHTMLで構成したことにならないということです。
• GIF画像は使用しない→がんばります、はい。

絶対にやっちゃダメなこと

• center,font,layer,b,iなどの要素を用いること→これらはすべて、他の要素やスタイルシートで代替可能です。
• color,bgcolor,face,sizeなどの属性を用いること→これらはすべて、スタイルシートで代替可能です。
• 要素の使い方が間違っている→ <a href=".."><h1>foo</h1></a>というのは間違いで、<h1><a href=".."></a></h1>が正しい。要素の意味を考えれば自明なことなので、要素を適用した結果の「見た目」(フォントがおおきくなるとか)ではなくて、その要素が示す文書の要素を常に考えながらタグ付けをしましょう。

このページの内容は、完全に無保証です。全ての環境において、この記事の内容が正しいことを保証するものでもありません。また、この記事の内容について、みなさまがどのような損害／不利益を被られても、私はそれらに対して何らの賠償などを行うものでもありません。しかし、これらの記事についての訂正、質問、苦情、その他ご意見は歓迎いたします。それらに対しては、ぼくのできる範囲で対応させていただきたいと思います。