Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介

メニューを開く

XML宣言について

HTML2011年2月5日

HTML文書はHTMLタグから始まりますが、XHTMLの場合、HTMLタグの前に「XML宣言」と「DOCTYPE宣言」を記載する必要があります。

XML宣言

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

DOCTYPE宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />

簡単に言うと、「XML宣言」は「この文書はXMLである」ということを宣言するためのものであり、「DOCTYPE宣言」は言語のバージョンや定義を宣言するための記述になります。

このXML宣言は「必須」ではありませんが「推奨」されているものであり、HTMLにはXML宣言が必要とされています...が、この記述を加えることで、IE6においては後方互換モードで動作し、通常とは異なったCSSの解釈をすることになります。
以下、具体的にCSSの解釈が変わる箇所です。

  1. ボックスの幅の解釈の違い
  2. img要素のpaddingプロパティが効かない
  3. marginプロパティのautoが効かない

1.ボックスの幅の解釈の違い

標準準拠モードの場合、width・padding。marjinを同時に記述した場合、widthの幅を基本とし、paddingとmarginが足されていきます。
しかし、後方互換モードではwidthの幅にpadding・marginの幅も含まれることになり、width:500px、padding:10px、margin:10pxをした場合、実際のボックスの幅は460pxとなってしまいます。

2.img要素のpaddingプロパティが効かない

これはそのまんまですが、後方互換モードの場合、img属性にpaddingを設定しても余白は確保されません。

3.marginプロパティのautoが効かない

ボックスのセンタリングをするためにmargin:0 autoといった記述をよく記述しますが、IE6の後方互換モードではこれを解釈しません。ボックスをセンタリングするためにはtext-align:centerを併用し、かつdivを入れ子にする必要があります。

XML宣言は入れなくてもよい

未だシェアのそれなりにあるIE6を無視できない現状を踏まえると、できることならXML宣言は避けたいものです。
色々詳しく調べてみたのですが、W3Cの勧告にて、「XML宣言は文書のエンコーディングがデフォルトのUTF-8またはUTF-16以外のとき、XML宣言は必要です」と明記されています。

つまりDOCTYPE宣言でのcharsetがUTF-8もしくはUTF-16であれば、XML宣言は問題なく省略する事ができます。
ただし、サーバーの仕様上、EUC-JPやshift_jisに限定される場合もあり、その場合においては記述しなくてはなりませんが、個人的にはそのような場合においても省くべきだと思います。CSSの煩雑さやパフォーマンスの高いHTML設計を行う意味でも、あえて記述する必要は無いでしょう。

先日、クライアントのガイドラインに沿って設計する案件があり、そのガイドラインに「XML宣言は必ず記述すること」とあり、マジかよーと思いましたが、XML宣言を記述した上でIE6対応も含めてガチでCSS設計する、というのは初めてだったので大変勉強になりました。

この記事を読んでいる方にオススメの記事

「HTML」の他の記事を読む

この記事にコメントする

必須
必須
本文必須

  • 承認制のため、即時には反映されません。

ページの先頭に戻る