DOCTYPE宣言・DOCTYPEスイッチ
DOCTYPEとは、「Document Type Definition（DTD）」のことで、日本語で「文書型の定義」を意味します。DOCTYPEスイッチは、HTMLやCSSを仕様通りに正しく解釈するブラウザと、そうでないブラウザが存在する中で、どのように解釈するかを状況によって切り替える事ができる仕様です。CSSに期待する処理の基準をHTMLのDOCTYPE宣言によって制御できます。
HTMLでは、ドキュメントの先頭に<!DOCTYPE>を記述して宣言を行います。
HTMLだけで記述していた時代はDTDを省略していた方も多いのですが、CSSを使うようになってからDOCTYPE宣言は必須の要素となりました。一時期は複雑な記述を強いられて複雑に思われていましたが、HTML5にバージョンアップしてシンプルで分かりやすい仕様になりました。
HTML5のDOCTYPE宣言
HTML5では、DOCTYPEの記述が非常にシンプルな形になっています。大文字と小文字は区別されません。
<!DOCTYPE html>
HTML4.01のDOCTYPE宣言
HTML4.01では、3種類のDTDが用意されています。 Internet Explorer 6.0の場合、Internet Explorer専用のタグやプロパティを使用してると、DOCTYPE宣言によって表示モードが異なるため表示しないものがあります。例えば、 scrollbarプロパティを指定しても反映しません。DOCTYPE宣言を使用する場合は、注意が必要です。
- Strict DTD
- 仕様通りHTML4.01本来の厳密で正確な解釈をします。非推奨要素や属性、またフレームを使用することができません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
- Transitional DTD
- 非推奨要素や属性は使用できますが、フレームを使用することができません。要素の配置については比較的制限が甘くなっています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
- Frameset DTD
- Transitional DTDとほぼ同じですが、フレームが使用できます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "https://www.w3.org/TR/html4/frameset.dtd">
XHTMLのDOCTYPE宣言
XHTMLの場合、<!DOCTYPE ...> の前に <?xml version="1.0" encoding="UTF-8"?> という1行を付けることが推奨されます。
<?xml version="1.0" encoding="UTF-8"?>
また、「名前空間」というものを導入する事がW3Cから勧告されています。
<html xmlns="https://www.w3.org/1999/xhtml">
UIは、この宣言を最初に行うことで文書で用いられているタグがXHTMLのものであることを認識します。
- XHTML 1.0 Strict DTD
- XHTML1.0の書式に則って厳密な記述であることを宣言します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Transitional DTD
- 非推奨要素の記述も許される比較的ゆるい記述であることを宣言します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset DTD
- [Transitional]と同等の形式で、フレームを使用する場合に宣言します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- XHTML 1.1 Strict DTD
- XHTML1.1の書式に則って厳密な記述であることを宣言します。XHTML 1.1はStrictに相当するものしか認められていません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- XHTML Basic 1.0 DTD
- 携帯電話などのXHTML機能をフルで扱うことができない端末のための設計となっています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "https://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
- XHTML Mobile Profile 1.0 DTD
- XHTML MPは、XHTML Basic 1.0にXHTML Modulesを追加したものです。携帯電話などのXHTML機能をフルで扱うことができない端末のための設計となっています。
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "https://www.wapforum.org/DTD/xhtml-mobile10.dtd">
CSSリファレンス
| CSSって何？ | 初めての方でも分かる超基礎知識を解説します |
| CSSの書き方 | CSSの書き方について基本的な解説です |
| CSSの特徴 | CSSの特徴を理解して有効に活用しましょう |
| CSSで使えるセレクタ | セレクタとはスタイルを適用する対象を指定するものです |
| CSSで使える単位 | CSSで使える単位の一覧です |
| ブロックレベルとインライン | ブロックレベル要素とインライン要素について詳しく解説 |
| idとclassについて | 要素にidとclassで名前を付ける |
| 余白と外枠の関係 | 余白や外枠を指定する際のコツについて |
| DOCTYPE宣言・DOCTYPEスイッチ | [!DOCTYPE]の使い方について |
| ユニバーサルセレクタ（*）について | ユニバーサルセレクタ（全称セレクタ）を使えば全てのタグを一括で指定できます |