あぶない！

あぶない！の目次

オーサリングツールが危ない

　俺はHome Page BuilderやFront Page、Dreamweaverといった「オーサリングツール」が大嫌いである。理由はただひとつのみ、吐き出すHTMLがあまりにも汚いからだ。無駄なゴミを量産するだけでは飽き足らず、インデントボタンを押すと<BLOCKQUOTE>を入れられる、「どこでも配置」と称して絶対指定で豪快に間違ったスタイルシートを使う、…など、枚挙にいとまがない。

　HTMLは、とても難しい。
　ビルダーに限らず、この手のツールでまともなHTMLを書けるものは存在しない。これだけ厳しいHTMLに加え、スタイルシートとの応用は、無数の操作パターンを生み出す。そのすべてを網羅することはできないし、そこまでこだわって作ってるとも思えない。新しいDreamweaverはなんか評判いいらしいが、わりと綺麗なゴミでしかない。
　結果として、見るも無残なソースが吐き出される。そして、HTMLなんか全然わかんない初心者と全然興味ない素人は、「これが俺のホームページだ〜」と喜び勇んでアップロードする。

　正しいHTMLを学び始めると、今のWeb世界がどれだけ凄惨なことになってるか、よくわかる。さすがの俺も一朝一夕の勉強でこんなことは言わない。
　荒らしているのは、他でもない、我ら素人集団だ。

希釈の法則

　俺が初めてネットの海へ飛びこんだのは、たった1年とちょっと前。初めてパソコンに触ったのも、たった1年とちょっと前。
　再考・HTMLで述べたようなことは、その頃からすでに言われていた。まさか自分が書くとは夢にも思わなかったが、それだけ状況が改善されていない証拠でもある。改善どころか悪化の一方だ。

　お堅いWeb世界は、パソコンの異常な低価格化とブラウザ戦争によって、ずいぶん柔らかくなったようだ。それはそれでいいんだろうけど、創世記からWebを利用していたお堅い人達は、さぞかし迷惑がっているに違いない。（こういう人達は必ずフレームやJavaScriptを嫌う）
　さて、自分のWebページが「後からのこのこやってきて好き放題に荒らす迷惑集団」の一端を担っていると知った時、諸兄は無関心でいられるだろうか？

　そして、これに多大な貢献をしているWeb世界の猛毒が、Home Page Builder を初めとしたオーサリングツールだと思っていたりする。個人的に。
　なお、個人的ついでに言うと、俺はあまり人の迷惑を考える方ではないので、玄人集団のことは全然気にとめてない。単に自分のWebページがゴミ同然のレベルであるのが嫌なだけである。それに気づいてしまった以上、放っておくことはできぬのだ。

解説書が危ない

　HTMLタグ辞典（アンク著）[A]という本がある。安い・わかりやすい・手軽が好評なのか、かなり売れていて、大概の本屋には置いてある。自ら「類似書はあまたありますが、本書が元祖定番です！」と語るだけはある。
　俺も人伝いのおすすめで知り、HTML、スタイルシート、JavaScript、全部このシリーズに育てられた。そのせいか、別に信者というほどでもないが、だいぶ無防備に信じていた。
　いや、スタイルシートとJavaScriptに関しては特に問題ないんだけど、……。
　ひとつ幸いなのは、この「HTMLタグ辞典」を入手したのが、だいぶ遅かったこと。なぜかスタイルシートを憶えきった頃で、始めたての大事な時期にその悪影響を受けなかったことか。

　ここまでくればわかるだろうが、実はこれが大変にダメな本だったのである。「正しいHTML」を学び始めた途端に出るわ出るわの間違い探し。その勢いたるや本当に「途端」で、著者のレベルの低さを痛感させられた。
　なまじ売れてるだけに、今さらながら危機感を覚える。それは「役立たず」ではなく「危険な毒物」だからだ。

　以下に俺が見つけた間違いを記す。厳しいようだが、俺に指摘される時点でこの本は終わっている。

ありがちな<TITLE>のミス

<TITLE>タグによるタイトルの指定がないときは、ファイル名がタイトルになりますので、なくてもかまいませんが、ここで指定したタイトルがホットリストなどでページの指定に使われることが多いため、記しておいた方が良いでしょう。

<TITLE>は必須で、省略は許されていない。ファイル名が代わりに使われるのは、単なるエラー処理の結果であり、そうすることが決められているわけではない。

ありがちなコメントのミス

<!-- -->タグを使うと、…

<!-- -->は「タグ」じゃない。SGMLの注釈宣言というものである。日常会話上では大目に見てもいいだろうが、解説書で「通じりゃいいでしょ」なんて甘い考えをもよおさないでいただきたい。

<P><HR></P>よりゃマシだけど

比べてみてください
<HR>
水平線
<P><HR><P>
地平線

<P>には<HR>（ブロック要素）が含むことができないので、自動的に</P>が補完され、

比べてみてください
<HR>
水平線
<P></P><HR><P>
地平線

と解釈される。前者の<P>の中身は空っぽになり、解説書の例文として載せるにはお粗末な代物となる。あまつさえ、スタイルシートの設定によっては、ふたつめの<P>以降が滅茶苦茶になりかねない。
そもそもは<P>のことを「改行」と勘違いしているのが原因で、間違っても誇らしげに「比べてみてください」などと言える例ではない。
そもそもなんスか？地平線て？

俗に「お尻<P>」と言うらしい？

段落を設定したいときは<P>を付けてください。テキストが改行され、さらに一行分のスペースが挿入されます。ただし、<P>タグをいくつならべてもブラウザに反映されるのは一つ分です。

段落替えを設定してみます。<BR>
改行を設定した場合と比べてみてください。<P>
ほらこのとおり。改行されて、さらに一行空きました。

この解説は「ダメ」の見本。「ブラウザに反映されるのは一つ分」で変だとは思わないのだろうか？　しかも<P>を入れる位置が思いっきり違う。やっぱり<P>は「改行」のようだ。

本当は<P>〜</P>タグ？
W3Cでは、<P>タグは、<P>〜</P>のかたちで終了タグと対で使われることを定めています。ただし、終了タグ</P>は省略可能であることも同時に定めており、通常<P>のみで用いられているのは、この形にのっとったものです。

なんでハテナが付くかな。
わからんのは、</P>を省略するとどうして<P>がお尻にくっつくのか、なんでそんな不可思議なことをして疑問に思わないのか、ということだ。
どうもこの著者は「段落」の意味を考えたことは一度もないらしい。（ちゃんと知っているなら「お尻<P>」はやらんだろうけどさ）

フォントサイズを指定する<H★>や...

これもかなり信じらんない。
これは「見出しレベル」を指定するもので、間違ってもフォントサイズを指定するタグじゃない。数字が小さいほどレベルが上だから、それに相応した強調…つまりIEなどではでっかくなるのだ。
これ書いた人はLynx使ったことないんだろうか？　（Lynxは文字サイズを変えられないので、レベルに応じて適当にインデントされる）
後ろの方、その<H★>の項目では…

ダブルで失格。

見出しの文字のサイズを変えたい！
ヘッダ（Header）タグ

はいダブルで失格。<Hn>はサイズを変えるタグじゃない。さらに、正しくはヘディング（Heading）であり、意味が全然違う。
みっともないことに、ここではちゃんと「見出しレベル」として正しい解説を書いておきながら

こうした機能をフォントサイズの指定に利用することもあります。邪道でしょうか・・・。

など素っ頓狂なことを言い始める。邪道です。

書いてて変だとは思わないのか…

<FONT>は見出し以外の文字のサイズを指定するタグです。<H★>タグとは逆で、値が大きいほど文字が大きくなりますので注意してください。
また、前後に改行やスペースも入りません。

<Hn>を根本的に勘違いしてるからこんな的外れな解説が出てくるんだな。
あまつさえ、ブロック要素とインライン要素の違いも解説することはない。本のどこにも書いてないから、たぶん知らないんだろう。…こんな基本的な概念…を？

明示的にすすめないだけマシ？

<CITE><CODE><DFN><KBD><SAMP><VAR>
これらのタグは、<EM>、<STRONG>と同じで、論理的に書体を指定するものです。
（中略）
指定のやり方が概念的に違うだけであって、表示結果としては論理的な指定と物理的な指定とでは大差ありません。現在では、物理的な指定が主流ですし、そのほうが表示された形状が作成者の意図したものからずれにくいでしょう。

特につっこむほどでもないけど、遠まわしに物理指定をすすめてるようにも思える。
念のため言うと、HTMLは「見る人」の意図通りに表示・再生されるべきものである。誤解せぬよう。

呼びません。

タグの表記に用いられる記号（<,>,&など）や、キーボードでは入力できない文字を特殊フォントと呼びます。

勝手な単語を作るな。半角&のどこが特殊なんだ。
ちなみに<（<になる）や©（©になる）のように、特殊な形式で書くものを「文字実体参照」「数値参照」と言い、「実体参照」と総称する。→邦訳仕様書[W]

なにか忘れてない？

（<LI>の）各項目は自動的に改行されるので、改行タグ<BR>を付す必要はありません。

<LI>でひとつの項目を意味するんだから、改行されるのはあたり前だろうに。
そもそも</LI>のことを無視するから、そんな的外れな解説になるのではないのか？　</LI>の姿がどこにもないのはどういうわけか？　まさか知らないとか？　必要ないタグと勘違いしてるとか？（省略可ではあるけど）

だいなし

<BLOCKQUOTE>の項目だが、かなりありがちな「インデントするタグ」などという致命的な誤りはなく（できれば「インデント目的で使うな」と書いてほしい）、解説も特に問題なく、一安心…したのもつかの間、…なんで「リスト」のページにあるんだろう？
もしかして<UL><OL>みたいにIEとネスケで前後改行とインデントが付くから？

あるべきものが逆

<FORM>の項目。
HTML4では必ずしも<FORM>の中にボタン類を入れる必要はないのだけど、それが書いてない。action属性が必須であることも書いてない。<FORM>の中でも、さらに<P>や<DIV>に入れなきゃいけないことが書いてない。ないない尽くしのくせして、微妙な間違いは無数にある。
そもそも、サンプルソースが間違ってる。

テーブルはWebデザインの救世主？

テーブルはWebデザインの救世主？
（中略、テーブルはレイアウトに使われることの方が多いとか、慣れないうちは難しいよ、とかなんとか）
しかし、それも上達のためのひとつの試練と思ってがんばってみてはどうでしょう？テーブルをうまく使ったページを見て、ソースを参照しながら研究してみるのもひとつのテです。

…あぁ。救世主ですか。俺が言うならともかく、貴方の発言がどれだけの影響力を持ってるか考えてないんですか。W3Cがいくら「テーブルをレイアウトに使うのはやめてくれ」っても、こういう本が協力しないと勢いは止まらんというのに。
「Webデザインの救世主」はテーブルじゃなくてスタイルシート。
末の1行、「うまい」の解釈は良い方に取ることもできるけど、間違ってもそんなことはないんだろうね…なんたって救世主だし…。
ちなみにワタクシは3重、4重といったテーブルも難なく使いこなせるくらいの達人だけど、修行の成果が残したものは「恥」だった。いやはや。

謎めき<TR>

<TABLE border>
<TD>***</TD><TD>***</TD>
<TR>
<TD>***</TD><TD>***</TD>
</TABLE>


HTML4を扱うんなら例文に<TABLE border>はやめようよ…。一応（後の方に）解説してあるけど…。（HTML4では<TABLE frame="box">と書く。borderは下位互換のために残されているだけ）
ていうか<TR>が1個足りないんだけど…？　まさか最初の行には必要ないとか言う気…？

Sは付いてるけれど

<FRAMESET COLS="30%,70%">
　<NOFRAMES>
　この部分に書かれたものが、フレーム機能のないブラウザに表示されます。
　</NOFRAMES>
　<FRAME SRC="test01.html">
　<FRAME SRC="test02.html">
　（本当はここに書く）
</FRAMESET>

フレーム関係のサンプルソース。ありがちな<NOFRAME>じゃなくて一安心…と思いきや、書く位置が違う…。</FRAMESET>の後に書くならありがちなミスだけど、なんで<FRAME>の前に書くの…？　どこからそんな知識を聞きかじってきたの…？
仕様書には「NOFRAMES要素は、移行型DTDとフレーム設定DTDの、双方に含まれる。フレーム設定DTDを用いる文書においては、NOFRAMES 要素はFRAMESET要素の末尾で。」って書いてあるのに…えーん。（泣いてしまえ）

インラインフレームと呼ぶべきか

<CENTER>
<H1>Floating Frame実行中</H1>
<IFRAME SRC="zakki.html" NAME="f">
</IFRAME>
</CENTER>

<IFRAME>のことを「フローティングフレーム」と呼ぶのだが、フローティングしてないじゃん…。そりゃalignを指定すりゃフロート（文字が横にまわりこむこと）するけどさ…まぁそんなのは重箱の隅か。
重箱ついでに、<CENTER>を使うのはやめなさい。（じきに廃止される予定）

索引にて

ページ…中の情報もさることながら、ページの見栄えも、見る人の興味を左右する大きな要素です。
フォント…フォントの選択もまた、作成したページの見栄えに大きな影響を与えます。

大きな要素で大きな影響はたしかにそうだけど、この人、HTMLをなんだと思ってるのだろう。表紙のどこを見ても「スタイルシート辞典」とは書いてないんだけど…。

HTMLをただ漠然と書くのでは、よいホームページはできません。

解説をただ漠然と書くのでは、よい解説書はできません。

　…ふぅ。俺が見つけたのは以上だが、探す人が探せば、もっとたくさんあるはずだ。

　この本はわかりやすさが人気で、かなり売れている。かなり…ていうか、たぶん一番売れている「HTMLの本」だろう。
　しかし、<TITLE>の省略や<P><Hn>の勘違いなどは、非常にありがちなミスだ。俺も、勉強を始めてまず最初に知ったのがこれ、ってくらいポピュラーだ。
　それにしっかり引っかかるというのは、仕様書には目を通さず、正確性なんか気にもとめず、根も葉もない一般解釈だけで適当に書いてる、格好の証拠となる。
　ちんぴらwebmasterじゃあるまいし、何百万と刷られる本の執筆者がそんな姿勢でいいのか。これだけの間違いを放ったらかしにしておくのは犯罪だ。いわず、解説書としての価値はゼロに等しい。
　構成的なわかりやすさはよくできてるだけに、残念でならぬ。

　HTMLの解説書は無数にあるが、このように「売れてるやつなら安心」と思ったら大間違い。実のところ、間違い勘違いのない解説書を探すのは極めて困難だ。試しに、知識をつけて本屋で片っ端から立ち読みしてみよう。辟易するに違いない。
　特に、本のタイトルに「ホームページ」とあったら確実にダメ。「これでバッチリ！ホームページ作り[M]」など。（←持ってるし。えぇ、一番最初のsiteCTSはこれ見ながら作ったものです。今はマウスパッドの下敷きです。厚みがちょうどよくてお気に入りです。）

講座が危ない

　ちょっと使い方を憶えると、すぐ人に教えてみたくなる、自己顕示欲の塊みたいな人がたくさんいる。単なる「俺の手順紹介」がCG講座を謳って無数にある。たかが半年くらい勉強しただけでPrettyJavaScriptなんて講座を作ろうなどと、大それたことを考え始める馬鹿もいる。
　それら自体はまぁ大変ご苦労で結構だが、自分がやっていることの重さをわかってないのか、間違いを堂々と書く人が多い。もちろん間違えてるなんて夢にも思ってないわけだが、但し書きに「鵜呑みにしちゃダメよ」と保険をかけておけばすむとでも思っているのだろうか。

　HTMLを教えるページはたくさんある。わかりやすいページもあるし、読みやすいページもあるし、凝ったページもあるけど、しかし、正確なページはほとんどない。つまり、自分でもよくわかってないのに、わかったような気がして書いてるケースが非常に多い。
　フォトショップの使い方を間違えた程度ならどうってことないが、HTMLの場合は違う。多くの人に迷惑がかかるのだ。しかも、ターゲットはWebに接続できる全世界の全コンピュータである。それをわかっているのだろうか。

　解説書が危ないでも示したように、一見信用できそうな解説書からしてあんなレベルだから、「自称先生」がどれだけあてにならないかは自明である。「インデントするには<BLOCKQUOTE>を使う」など、とんでもないことを平気で書いてくれたりする。「HTMLにはインデントするタグはありません」と書いてあるなど、極めて稀だ。あまつさえ「テクニック」などと称していたりして、そっと教えてあげる気にもならない。
　よって、「講座を見たら眉唾と思え」。

　でも、中には正しいものも（もちろん）あるので、俺の経験から得た見分け方を記してみよう。ほとんど振るい落とされるのがわかるはずだ。

　これらは非常にありがちなもので、ちょっと調べるだけですぐ情報にぶつかる。そんなこともカバーできないのは、作成にそれだけ力を入れていない証拠である。また、やっちゃダメ系については、「なぜダメなのか？」も求められる。どっかで聞きかじったことをそのまま書いてるかもしれないからだ。
　ひとつでも当てはまらない項目があった場合、信用しない方が身のためだ。
　ただし、タグの効能を簡単にまとめたリファレンス形式の場合は、この限りではない。（無論、誤りを書いてないことが前提である）
　リファレンス形式の場合、以下の項目を参考に判断するのも一手だ。当てはまる数が多いほど「使える」と判断していいだろう。

　この他、JavaScriptユーザーはタグごとのイベント適用表もあると便利だろう。
　最後に、一番わかりやすい判断方法がある。そこのWebサイトのソースをまんべんなく見て、最初の1行が

　…とまったく同じだったら、望みはかなり高い。これはHTMLの中で一番厳しい「4.01Strict仕様」の宣言だからだ。その厳しさたるや、尊敬に値すると言ってよい。（ただし<FONT>がひとつでもあったら偽物）
　HTMLを人に教えようというなら相応の実力を持っているべきであり、これは必須条件と言っていいかもしれない。

　もうひとつ。言うまでもないことだけど、もっとも信用に足る情報とは、本物の仕様書のみである。

番外・お絵描きサイトも危ない

　Webは自由な場だから、基本的に誰がなにしようと勝手だ。中途半端な素人がPrettyJavaScriptなどと称して講座を開設しても、罪に問われることはない。個人の趣味サイト、企業のサイト、マイホームパパのサイト、実に色々ある。そして、学術関係のサイトもある。おそらく、最後のやつだけがHTMLに本来の仕事をさせている分野かもしれない。

　俺も絵描きの一人だから、お絵描き系のページをよく見てまわる。
　この類いはマイホームパパよりひどいもので、重量級画像の乱舞・不親切な設計・でたらめなHTMLという「Web三悪」を完璧にこなす珍しい分野だ。たまに良質なとこを見つけたと思ったら、やっぱりコンピュータ関係の人だったりする。
　ギャラリーの画像が重いのはまぁ許されることとして、トップページに120KBの画像を置いたりするのは、どう考えても正気の沙汰ではない。あまつさえ、290KBのバナーなどという気違いじみたものまである。（悪い意図で用いるので申し訳ないが、俄かには信じられない人が多いだろうので、証拠を提出する）

　この傾向には納得がいく。なぜなら、彼らはお絵描きが一番好きだからだ。正しいお絵描きに忙しくてHTMLまでは手がまわらないし、ページ作成はツールに任せた方が早いし楽だ。よしんば自分で書いたところで、頭にはおしゃれなレイアウトの設計図しかない。トップページに120KBの画像なんて、見る人のストレスより己の意図の方が百倍も大事な証拠である。

　もちろん全部一緒くたにすることはできないけど、大概の場合、彼らは自分が上がっている土俵の景色をまったく見ていない。紙の上と同じに思っている。
　それが、やたらレイアウトにこだわる傾向に現れる。これはもう絵描きの性というやつだろう。もちろん、俺もご多分に漏れない。
　こだわることは悪くないが、HTMLにおいて、高いアクセシビリティを維持しつつレイアウトに凝るのは、恐ろしく難しい。だって、そういうことのために作られていないから。フレームは使えない、（レイアウト目的の）テーブルは使えない、<FONT>も使えない、しかしスタイルシートも正直まだまだお寒い。
　そんな状況で、「描いた絵を見せるだけのWebページ」が、この難題をクリアできるだろうか。

　俺が思うところ、現状の「正しいHTML」では、それほど凝ったレイアウトは不可能である。テーブルが使えないというのは、横方向へのレイアウトができなくなることを意味するからだ。（もちろん、「テーブル」の意図を理解していれば、使えないこともない）

　どれだけオシャレでも、どんなに凝っていても、テーブルを駆使すれば駆使するほど「でたらめ」になっていくことを、皆は知っていないといけない。

まとめ・結局なにが言いたいのか

　俺は、見た目で簡単に騙せるわかりやすい素人より、ページの作りですぐに察知してソースをのぞくような玄人を相手に戦いたい。
　現在のsiteCTSがご多分に漏れないことを省みて、「真に格好いいWebページ」を目指そうと思う。今までサボってきた分だけの代償はあるだろうけど、それでも、siteCTSはかなり救われているはずだ。
　だって、俺はなにからなにまで、全部自分で組んでいるから。
　つまり、俺が正しい知識さえ身に付ければ、ひどい現状も改善可能なのだ。ツールまかせのwebmasterが管理する全自動サイトでは、こうはいかない。

　siteCTSのモットーは「人と地球と自分に優しく」である。時々、「目指そう人に優しいサイト作り」などと吹聴するが、今度は本気でそれを目指すのだ。
　お絵描き系なのかコンピュータ系なのかどっちでもないのか、webmasterの性分を如実に表した中途半端なsiteCTSだが、少なくともお絵描き系に歩み寄ることは当分なさそうである。