BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

文書型宣言

HTMLの仕様に従っている文書はその先頭(*1)に、従う文書型(DOCTYPE)を宣言する必要があります。ここではHTML4.01XHTML1.0XHTML1.1の文書型を紹介します。

HTML4.01
  1. HTML4.01 Strict(厳密型)

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

  2. HTML4.01 Transitional(移行型)

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

  3. HTML4.01 Frameset(フレーム設定型)

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

仕様の詳細につきましては、HTML 4.01 specification又はHTML 4.01 仕様書邦訳をご覧ください。

XHTML1.0
  1. XHTML1.0 Strict(厳密型)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

  2. XHTML1.0 Transitional(移行型)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

  3. XHTML1.0 Frameset(フレーム設定型)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">

仕様の詳細につきましては、XHTML 1.0 specification又はXHTML 1.0 仕様書翻訳をご覧ください。

XHTML1.1
  1. XHTML1.1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

仕様の詳細につきましては、XHTML 1.1 Recommendation又はXHTML 1.1 勧告翻訳をご覧ください。

HTML4.01及びXHTML1.0にはそれぞれ3種類の文書型宣言があります。

Strict(厳密型)
W3Cの仕様に厳密に従っていることを宣言するものです。見栄えを指定するもの等、非推奨とされている要素や属性及びフレーム関連要素を使用することはできません。
Transitional(移行型)
古いブラウザとの互換性を保つため、非推奨とされている要素や属性を使用することができます。
Frameset(フレーム設定型)
frameset要素を用いてフレームを指定する際に用います。フレーム関連要素はStrict(厳密型)で定義されていないため、中のhtmlファイルはTransitional(移行型)を宣言します。

HTML4.01及びXHTML1.0で非推奨とされている要素や属性は、XHTML1.1で正式に廃止されました。よって、XHTML1.1の文書型宣言はStrict(厳密型)のみです。

新しい視覚系ブラウザの多くは、文書型宣言を識別して表示モードを選択します。

標準モード
W3Cの仕様に従った表示をします。
互換モード
古いブラウザと互換性のある表示をします。

通常、誤りのない文書型宣言をすれば標準モードで表示され、文書型宣言に誤りのある場合や文書型宣言が存在しない場合に互換モードで表示されます。しかし、標準モードで表示すべき文書型宣言であるにも関わらず互換モードで表示される場合があります。

  1. HTML4.01 TransitionalまたはHTML4.01 Framesetにおいてシステム識別子を省略すると、主要な視覚系ブラウザでは互換モードで表示されます(*2)

    <!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">

  2. XHTMLにおいてXML宣言を記述すると、Micrsoft Internet Explorer 6では互換モードで表示されます。

    <?xml version="1.0" encoding="Shift_JIS"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

    可能ならば、XML宣言を省略することでIE6においても標準モードで表示することができます(*3)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

特にXML宣言を行う場合ブラウザによって表示モードが異なるため、標準モードと互換モードの違いを認識する必要があります。これらの違いは、主にスタイルシートの適用のされ方に顕著に見られます。

ブロック要素の幅と高さ

CSSのwidth及びheightプロパティの適用のされ方が異なります。互換モードではpadding及びborder-widthの値を含むのに対し、標準モードではこれらの値を含みません。つまり、標準モードの方がpadding及びborder-widthの分だけ幅と高さが大きくなります(*4)。IE6で問題なく表示されるページをGecko系ブラウザ(*5)やOpera等で閲覧するとサイドバーが収まりきらずに落ちてしまう現象が起こるのはこのためです。

ブロック要素の中央寄せ
ブロック要素を中央寄せするには、左右のマージンをautoとします。

#all{ margin:5px auto 10px; }(*6)

しかしIE6の互換モードは、この方法ではブロック要素を中央寄せしません。中央寄せするにはIE6のバグを利用します。

<body>
<div class="all">
(中央寄せされたボックスの中身) </div>
</body>

body{ text-align:center; }
#all{ margin:5px auto 10px; text-align:left; }

text-alignプロパティは本来、ブロック要素に含まれるインライン要素の横方向の位置を指定するものであり、ブロック要素の横方向の位置を指定するものではありません。

(*1)
<html>タグよりも手前に記述します。
(*2)
ホームページ作成ソフトの中には、システム識別子を省略した形式で文書型宣言を行うものがありますのでご注意ください。
(*3)
文字コードがUTF-8またはUTF-16の場合は問題なく省略できます。それ以外の文字コードを指定する場合は必須です。
(*4)
widthを400px、左右のpaddingを10px、左右のborder-widthを1pxと指定した場合における実際のボックスの横幅は、互換モードでは400pxであるのに対し、標準モードでは左右のpaddingとborder-widthの値が加わり422pxとなります。標準モードでの横幅を400pxとするには、左右のpaddingとborder-widthの値を引いてwidthを378pxと指定する必要があります。
表示モードに関わらず同じ横幅で表示させる方法
(*5)
Mozilla , Netscape , Firefox等を指します。
(*6)
margin , padding , border-widthの値は、一括指定することが可能です。この例では、上側のマージンを5px、左右のマージンをauto、下側のマージンを10pxとしています。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。