ウェブランサー

DOCTYPE宣言・DOCTYPEスイッチ

DOCTYPE

DOCTYPEとは、「Document Type Definition(DTD)」のことで、日本語で「文書型の定義」を意味します。DOCTYPEスイッチは、HTMLやCSSを仕様通りに正しく解釈するブラウザと、そうでないブラウザが存在する中で、どのように解釈するかを状況によって切り替える事ができる仕様です。CSSに期待する処理の基準をHTMLのDOCTYPE宣言によって制御できます。

HTMLでは、ドキュメントの先頭に<!DOCTYPE>を記述して宣言を行います。

HTMLだけで記述していた時代はDTDを省略していた方も多いのですが、CSSを使うようになってからDOCTYPE宣言は必須の要素となりました。一時期は複雑な記述を強いられて複雑に思われていましたが、HTML5にバージョンアップしてシンプルで分かりやすい仕様になりました。

HTML5のDOCTYPE宣言

HTML5では、DOCTYPEの記述が非常にシンプルな形になっています。大文字と小文字は区別されません。

HTML
<!DOCTYPE html>

HTML4.01のDOCTYPE宣言

HTML4.01では、3種類のDTDが用意されています。 Internet Explorer 6.0の場合、Internet Explorer専用のタグやプロパティを使用してると、DOCTYPE宣言によって表示モードが異なるため表示しないものがあります。例えば、 scrollbarプロパティを指定しても反映しません。DOCTYPE宣言を使用する場合は、注意が必要です。

Strict DTD
仕様通りHTML4.01本来の厳密で正確な解釈をします。非推奨要素や属性、またフレームを使用することができません。
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional DTD
非推奨要素や属性は使用できますが、フレームを使用することができません。要素の配置については比較的制限が甘くなっています。
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset DTD
Transitional DTDとほぼ同じですが、フレームが使用できます。
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTMLのDOCTYPE宣言

XHTMLの場合、<!DOCTYPE ...> の前に <?xml version="1.0" encoding="UTF-8"?> という1行を付けることが推奨されます。

XHTML
<?xml version="1.0" encoding="UTF-8"?>

また、「名前空間」というものを導入する事がW3Cから勧告されています。

XHTML
<html xmlns="http://www.w3.org/1999/xhtml">

UIは、この宣言を最初に行うことで文書で用いられているタグがXHTMLのものであることを認識します。

XHTML 1.0 Strict DTD
XHTML1.0の書式に則って厳密な記述であることを宣言します。
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional DTD
非推奨要素の記述も許される比較的ゆるい記述であることを宣言します。
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset DTD
[Transitional]と同等の形式で、フレームを使用する場合に宣言します。
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 Strict DTD
XHTML1.1の書式に則って厳密な記述であることを宣言します。XHTML 1.1はStrictに相当するものしか認められていません。
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML Basic 1.0 DTD
携帯電話などのXHTML機能をフルで扱うことができない端末のための設計となっています。
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
XHTML Mobile Profile 1.0 DTD
XHTML MPは、XHTML Basic 1.0にXHTML Modulesを追加したものです。携帯電話などのXHTML機能をフルで扱うことができない端末のための設計となっています。
XHTML
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

CSSリファレンス

CSSって何? 初めての方はこちらからお読み下さい
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます