トップページ > ホームページ作成 > ドキュメントタイプ
HTML(Hyper Text Markup Language)の書き方の説明です。HTML/XHTML(The Extensible HyperText Markup Language )は、The World Wide Web Consortium (W3C)という非営利団体が仕様の協議決定を行っています。文書を書くときは先頭に「ドキュメントタイプ」を記載することを推奨されています。初心者にはよく解らないと思いますので、デジットさんのお勧めを紹介します。
ドキュメントタイプとは
ドキュメントタイプ(Document Type Definition、以下DTDとs示します)は、DTDの書き方によって、ブラウザでの表示モードが異なります。表示モードには、標準モードと互換モードがあります。DTDは省略してもかまいませんが、表示結果が旧バージョンと同じ互換モードになります。有名サイトでもDTDを省略しているのを見かけますが、ブラウザやブラウザのバージョンによって見え方が変りますので、指定したほうが良いと思います。
DTDとブラウザの表示モード
DTDによる一番大きな違いは、スタイルシートで「width」を指定した場合のようです。W3Cで推奨されている互換モードをつかうのが一番良いと思います。「インターネットエクスプローラ６」や「ネットスケープ６．２」や「Macのインターネットエクスプローラ５」でも、標準モードで同じように表示される下記リストのバージョンがお勧めです。また、このバージョンは現在は推奨されていない要素や属性も含まれていますので、使いやすいと思います。大文字・小文字・スペースに意味がありますので、下記をそのままコピーして使うのが良いと思います。この宣言は、HTMLの文頭（<html>より前）に、書きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
標準モードと互換モードの違い
標準モードと互換モードの表示サンプル
左は、同じスタイルシートで画面レイアウトを指定したサンプルを表示します。「widht」の違いが確認出来ると思います。「widht」は、標準モードではコンテンツ（下記例では文字部）の幅になりますが、互換モードでは、ボーダー（枠線）やパディング（枠線と文字部の隙間）も含んでしまいます。
標準モードのほうが幅が広くなりますので、無意識に互換モードで作ったレイアウト作った場合、互換モードでは「side部」が上手く収まっていたのに、標準モードでは幅がオーバーフローしサ「side部」が下の「main部」より下のほうに行ってしまい、「main部」が長い場合は「side部」が気づかれないような弊害もでます。
標準モードと互換モードの表示サンプル
上記標準モードと互換モードの表示サンプルで使った共通のCSSソースです。ご参考にどうぞ。
#contents { /* contentsのスタイル*/
width:250px; /* 幅250 */
border:solid 10px #555555; /* 濃いグレー枠線10ピクセル */
background-color:#cccccc; /* 背景グレー */
}
#main { /* mainのスタイル*/
width:120px; /* 幅120 */
padding:20px; /* 枠線と文字部の隙間20ピクセル*/
float:left; /* sideを右に表示する*/
border:solid 1px #55ffff; /* 水色枠線1ピクセル*/
background-color:#eeaaff; /* 背景（パディング）ピンク*/
}
#side { /* sideのスタイル*/
width:60px; /* 幅60 */
padding:8px; /* 枠線と文字部の隙間8ピクセル*/
margin-left:165px; /* 左から165ピクセル位置に表示 */
border:solid 1px #ffaaff; /* ピンク枠線1ピクセル*/
background-color:#ffffaa; /* 背景パディング）ピンク黄色*/
}
HTML参考サイト
以下、HTML/XHTMLの参考になるサイトです。
がお薦め、
PHP5を使うなら