第4回 XHTMLで制作する際の実践ポイント
前回まで、タグの記述と、XHTML文書を使う際の決まり文句的なルールを紹介してきた。XHTMLの基礎講座のような感じで開設してきたが、ここまでを基礎として、これから発展性のあるXHTMLを解説していく。より実務的な内容に踏み込んでいくので、要チェック!!
解説：鷹野雅弘（株式会社スイッチ代表）
 |
［プロフィール］ た かの・まさひろ●トレーナー、テクニカルライター、デザイナー。アップルストア銀座でのマンスリーイベント「CSS Nite」を主催するなど、多方面で活躍している。多忙なクリエーターが合間を見て学習できる「できるクリエーターFlash独習ナビ（インプレス）」や 「Illustrator CS2完全制覇（翔泳社）」などのほか、近刊では『できるクリエーターDreamweaver独習ナビ（インプレス）』を執筆するなど、クリエーター教育にも力を注ぐ。 |
XML宣言の省略
前回、XML宣言（＜？xml version="1.0" encoding="UTF-8"？＞）について、「UTF-8」（または「UTF-16」）の場合、省略できるとご紹介したが、実はXML宣言の有無によって、ブラウザの表示結果が変わってしまうので注意が必要だ。
モダンブラウザと呼ばれる最近のブラウザには「DOCTYPEスイッチ」というものがあり、XML宣言や文書型宣言の記述によって、表示内容が「標準モード」（Standard Mode）、「互換モード」（Quirks Mode）の間で切り替わるようになっている。「互換モード」とは、Windows版Internet Explorer 5.x以下のふるまいをシミュレーションするもので、widthの計算方法、初期設定のフォントサイズなどが異なる。
Firefox、Opera、Safariなどのブラウザでは、XML宣言のあるなしに関わらず、正しい文書型宣言が行われていれば「標準モード」となるが、Windows版Internet Explorer 6.0のみ、XMLがあると互換モードになってしまう。これを嫌って、XML宣言を記述しないこともよく行われる。なお、システム識別子（文書型宣言の後半部分「"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"」）を省略すると、互換モードになってしまうので、注意が必要だ。
各ブラウザごとのXML宣言
XML宣言のありなしによる各ブラウザのモード
●互換モード
「互換モード」での代表的な仕様について、さらに詳しくふれておこう。
（1）ブロックレベル要素に、paddingやborderを加える場合、「標準モード」では、それらを計算に加えないが、「互換モード」では、総合計がwidthになる。
（2）small、x-smallなどのキーワードを使ってフォントサイズを指定するとき、一回り大きく表示されてしまう。
（3）互換モードでは、marginにautoを設定できないため、固定サイズのレイアウトを中央揃えに設定する場合、「body {text-align: center} #wrapper {text-align: center}」のように、文字揃えを使って指定する必要がある。
●script要素やstyle要素は外部ファイルにする
「＜」「＞」「&」は、XHTML内で特別な意味を持つため、インラインで記述している場合、エラーの原因になりがちだ。JavaScriptやCSSの情報は、外部ファイルに記述し、そのファイルにリンクしよう。
●ページ内リンクはnamaからidへ
HTMLではページ内でリンク設定する場合、たとえば、ページ上部に＜a name="pagetop"＞（画像や文字など）＜/a＞を記述し、ページ下部に＜a href="#pageTop"＞ページの先頭に戻る＞＜/a＞のようにリンクを設定する。
XHTMLではname属性が非推奨（またはバージョンによって廃止）となるため、nameの代わりにidを使う。後方互換性を保つため、＜a id="pageTop" name="pageTop"＞のように「id」「name」に同じ値を記述しておくとよいだろう。
なお、form要素、map要素も同様。name属性でなくid属性を使う。移行期では両方記述しておくとよい。
●新規ウィンドウは開けない？
新規ウィンドウを開く際、a要素内に記述する「target="_blank"」は、XHTML 1.1（および、HTMLでもStrictと呼ばれる文書型）では抹消。ちなみにHTML4 Transitionalでも非推奨となっている。
新規ウィンドウを開くかどうかについては賛否両論あるが、仕様では、使われなくなりつつある方向であることを覚えておきたい。
次号につづく
「互換モード」での代表的な仕様について、さらに詳しくふれておこう。
（1）ブロックレベル要素に、paddingやborderを加える場合、「標準モード」では、それらを計算に加えないが、「互換モード」では、総合計がwidthになる。
（2）small、x-smallなどのキーワードを使ってフォントサイズを指定するとき、一回り大きく表示されてしまう。
（3）互換モードでは、marginにautoを設定できないため、固定サイズのレイアウトを中央揃えに設定する場合、「body {text-align: center} #wrapper {text-align: center}」のように、文字揃えを使って指定する必要がある。
●script要素やstyle要素は外部ファイルにする
「＜」「＞」「&」は、XHTML内で特別な意味を持つため、インラインで記述している場合、エラーの原因になりがちだ。JavaScriptやCSSの情報は、外部ファイルに記述し、そのファイルにリンクしよう。
●ページ内リンクはnamaからidへ
HTMLではページ内でリンク設定する場合、たとえば、ページ上部に＜a name="pagetop"＞（画像や文字など）＜/a＞を記述し、ページ下部に＜a href="#pageTop"＞ページの先頭に戻る＞＜/a＞のようにリンクを設定する。
XHTMLではname属性が非推奨（またはバージョンによって廃止）となるため、nameの代わりにidを使う。後方互換性を保つため、＜a id="pageTop" name="pageTop"＞のように「id」「name」に同じ値を記述しておくとよいだろう。
なお、form要素、map要素も同様。name属性でなくid属性を使う。移行期では両方記述しておくとよい。
●新規ウィンドウは開けない？
新規ウィンドウを開く際、a要素内に記述する「target="_blank"」は、XHTML 1.1（および、HTMLでもStrictと呼ばれる文書型）では抹消。ちなみにHTML4 Transitionalでも非推奨となっている。
新規ウィンドウを開くかどうかについては賛否両論あるが、仕様では、使われなくなりつつある方向であることを覚えておきたい。
次号につづく
