top

HTMLで四苦八苦~DOCTYPE宣言?

メインサイトの手直しに取りかかってみようと、ここ2日間ほどHTMLと格闘してました。で、冒頭からさっそくつまづく。実はFrontPageはDOCTYPE宣言を書かないんです。おかげで何年もの間DOCTYPE宣言なしでいきなり<html>から始まるファイルでやってきたわけですが、このままではホームページビルダーで作ってる中学生のサイトにすら負けてるじゃないか、ということでまずはここから勉強することに。

■DOCTYPE宣言
メインサイトはできるだけ幅広いブラウザをカバーしたいので、とりあえずはXTMLではなくHTMLで行くことに。今のバージョンは4.01みたいですね。書き方は3種類あって、上から一番厳格なタイプ、従来との互換性のあるタイプ、フレーム頁用となっているみたいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

うちのサイト方針なら互換性のあるタイプだなということでTransitionalを選ぶことに。ところでこれには下記のようにアドレスが付くタイプもあるようですが、IEの場合はアドレスがつくと標準準拠モードになり、無いと後方互換モード(IE5の表示に対応できるタイプ?)になるそうです(参考→Internet Explorer 6 における CSS の拡張)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

IE5で見に来てる人もまだまだいるので、IE5までカバーできるようにアドレス無しでいくことにしました。この場合、IE5とIE6では一部のCSSの解釈が違ってくるので注意が必要みたいです。あ、そうだったのか、それでCSSレイアウトが上手くいかなかったのね…。

■レイアウトはテーブルで
レイアウトはこれまで通りテーブルレイアウトで。自分にまだCSSのスキルが不十分なのと、古いブラウザへも対応できるようにしたいとの考えからです。ただし文字装飾などは出来るだけCSSでやっていく方針で。

テーブルの長所はどんな環境でもまず崩れないレイアウトを保てることですね。CSSはまだまだブラウザ間による解釈の違いとかがあって、十分なスキルがない者が扱うには難しい感じです。WingMemoなら自分のための覚え書きだから見られる人だけ見て下さい、と突っ放せるけど、メインサイトはそれでは通りません。何を優先させ、何を大事にするか。そういった総合的な判断から出た結論がテーブルレイアウトでも全然かまわないと思います。

■valid?
それでも「テーブルレイアウトかよ~」と馬鹿にされるのは悔しい(^^;ので、HTML構文チェックを行いながら、トップ頁の試作をやってみました。その結果、Another HTML-lint gatewayで-23点(マイナスですよ~)だったのが99点になりW3Cでも合格バナーもらえるところまでいきました。…見た目は全然変わってないんですけどね(差し替え予定は次回更新時です)。

100点満点ではないのは、target属性を使っているところがあるため1点引かれているからですが、W3Cではこの点は問題にならないようです。確かにフレームを使うときはtarget属性は必ず指定しなければいけないので、正式にサポートしている機能に必要なタグが減点対象になるのは矛盾しているように思えます。まあ本家で通ってればいいんじゃないのか?ということにしておきます。