基礎知識：DOCTYPE宣言
- トモ・リーン
- DOCTYPE宣言って知ってる？
- ケンジ
- おう！
HTMLタグの上にあるナゾの呪文みたいなやつだよな！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- トモ・リーン
- 実はこれ、WebブラウザでのCSSの表示方法に深くかかわっているのよ～！
- ケンジ
- えぇえええ～～～～。
まじでぇえええええ！！！！！
- トモ・リーン
- Webブラウザでの表示を「互換モード」「標準モード」に切り替えるスイッチの役割をはたしているの。
互換モード
Internet Explorer5.5以前の表示に近い表示方法。
標準モード
HTMLやCSSの仕様にのっとった表示方法。
- ケンジ
- CSSでの表現をどんどんしたい場合は「標準モード」にするのが良さそうだね！
- トモ・リーン
- イエ～ス！
そんなわけで次はDOCTYPE宣言の紹介よ～！
| HTMLのバージョン | ソースの書き方 | DOCTYPE宣言 | ブラウザ | 表示 モード |
|---|---|---|---|---|
| DOCTYPE宣言なし | IE6 | 互換 | ||
| モダン系 | 互換 | |||
| HTML 4.01 | Transitional 移行タイプ |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | IE6 | 標準 |
| モダン系 | 標準 | |||
| Strict 厳密なタイプ |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | IE6 | 標準 | |
| モダン系 | 標準 | |||
| Frameset フレーム使用 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> | IE6 | 互換 | |
| モダン系 | 互換 | |||
| XHTML 1.0 | Transitional 移行タイプ |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | IE6 | 標準 |
| モダン系 | 標準 | |||
| Strict 厳密なタイプ |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | IE6 | 標準 | |
| モダン系 | 標準 | |||
| Frameset フレーム使用 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> | IE6 | 標準 | |
| モダン系 | 標準 | |||
| XHTML 1.1 | Strict 厳密なタイプ |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | IE6 | 標準 |
| モダン系 | 標準 |
- トモ・リーン
- 続いてXHTMLに設定したときのDOCTYPE宣言関連に対するIE6の罠について！
XHTMLの場合、DOCTYPE宣言の前にXML宣言も必要です。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><?xml version="1.0"
→ここのバージョンはXHTMLのバージョンが1.0でも1.1でもversion="1.0" です。
encoding="UTF-8"?>
→ここは文字コードを入れます。例は「UTF-8」の場合で、SHIFT-JISのときは"Shift_JIS"と書きます。
罠！どんなDOCTYPE宣言をしてもIE6で無視！！
XML宣言を入れるとIE6でそれに続くDOCTYPE宣言を無視してしまいます。どんなDOCTYPE宣言が書いてあろうが互換モードになってしまいます。なんじゃそりゃ～～ぁあ！
XHTML + IE6だけど、標準モードにしたい！
なんと出来ます。
文字コードがUTF-8のときだけXML宣言を省略することが出来ます。
ですからXML宣言を省略して、XHTMLのDOCTYPE宣言を入れると大丈夫です。
UTF-8以外の、他の文字コードの場合（SHIFT-JIS、EUC-JPなど）ではXHTML作成＋IE6対応は無理です。
あと、XHTML＋UTF-8で作ったとしても、拡張子は「html」にしておかないと、またもやIE6で不都合が出ますので気をつけてください。
- ケンジ
- うぐっ・・・・・・（IE6、メンドくさっ）
まぁ、はじめに決まりを一度作って、それをコピペ利用したらいいよね！
- トモ・リーン
- 色々書いたけど重要なのは複数の宣言をサイト内に混ぜて使用しないことね。
ページによって宣言が違うと、同じCSSでも表示法が変わるから色々面倒よ。
- ケンジ
- で、結局どの宣言がいいの？
- トモ・リーン
- う～ん、このあたりが良く使われているわね。
- CSSもしたいけど、テーブルレイアウトも混ぜる場合
- HTML 4.01 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - 飾り要素はCSSのみで表現するとき＋XHTMLにする
- XHTML 1.0 Transitional、文字コードUTF-8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - マニア、Mっ気、何かしらの事情のある方
- XHTML 1.1、文字コードUTF-8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- トモ・リーン
- 私の場合は飾り要素のタグを使ってないし、フレームも使わないので「XHTML 1.0 Transitional」にしているわ。（文字コードはUTF8で）
XHTML用の宣言は他にStrictとかもあるけど、ものすごい制約（aタグのtarget="_blank"がダメとか！！）があるので、よほどの理由が無い限りは使わないわね～。
ぶっちゃけたことを言うと、無しでもいいの！
- ケンジ
- えぇええええ！！！
ちょっっっ！いい加減すぎじゃない？
- トモ・リーン
- （うわ～、はじめは変なまじない程度にしか思ってなかったくせに～）
有名な検索エンジンのGoogleとか実は宣言が無いのよ。
でも同じCSSでも表示方法が変わるから宣言を入れない場合は徹底して、宣言を入れないようにしないとダメよ。（そして互換モードになるので気をつけて！）
HTMLの仕様的には宣言は必要なので、ホントにケースバイケースね・・・。
- 今回のポイント！
-
- DOCTYPE宣言はWebブラウザの表示方法を「互換モード」「標準モード」に切り替えるスイッチの役割もある
- 宣言は「コレが一番」と言うのは無いが、サイト内で統一しておこう
- コメント(3)
-
- VoIP Blog
Lovely post. I like your pencraft and that’s great that you’ve opened this subject. Only fool can disagree with this!
- 2008/04/03
- 佐藤とも子
Thank you!
- 2008/04/03
- トモ・リーン
なぜかxml宣言文の「?」が「～」になってたので直しました！
- 2008/12/16