CSSを視野に入れたXHTMLのルール

●XHTMLのルール

　XHTML文書はれっきとしたXML文書です。ここでは、XHTMLの歴史やメリットを解説しませんが、HTML4.01とXHTMLの違いを中心にXHTMLのルールを解説します。

　XHTML1.0はHTML4で利用できる要素や属性をそのまま利用し、かつ、XMLに適合するように再定義したものです。従って、Transitional・Frameset・Strictの3種類のDTD（文書型定義）および、DOCTYPE宣言があることになります。XHTML1.0の文法に沿って記述しますが、基本的にはHTML4.01と同じように記述することができます。一方、XHTML1.1はXHTML1.0のStrict形式をベースにルビ（ふりがな）関連のモジュールを追加したものです。規則もより厳しいものになっています。

　細かいところでHTMLとは違ってきますが、おおむねを記載します。また、十分ではありませんが、XHTML Basicについても触れてあります。別ページと併せて、ご参照ください。

※XHTML Basic は携帯電話対応ページや小型機器向けのモジュール。ただし、使用できる要素や属性はXHTML1.0・XHTML1.1と比べ、限られています。携帯端末向けのモジュールとしてはXMP（XHTML Mobile Profile）もありますが、本稿は割愛します。

■XHTML文書の拡張子

　XHTML文書の拡張子は「xhtml」（そのほかあり）ですが、ウィンドウズ版IE（6.0）で適切に処理されません。（表示されない）そこで、当面の間はHTML文書と同じく、「html」か「htm」の拡張子を使います。

※現状はXML形式のHTMLファイルです。XML形式のHTMLファイルとはXML（XHTML）の文法で書かれ、かつ、拡張子が「html」か「htm」ファイルのことです。

■XHTML文書におけるCSSの組み込み

　XHTML文書におけるstyle要素を使ったCSSの取り込み方は次のようになっています。

【XHTML】↓

注： CDATA と [ の間にはスペースを入れないでください。（じかに付けないとエラーとなります。）

　確認してみるとウィンドウズ版IE（6.0）、Netscape (v7.1)、Mozilla（v1.7.12）、Firefox（v1.5）、Opera（v8.50）のブラウザで「CDATAセクション」（<![CDATA[　～　]]>）は、CSSのスタイルが反映されません。ただし、XHTML文書の拡張子が「xhtml」でNetscape、Mozilla、Firefox、Operaの各ブラウザで確認すると反映されています。仕様としては上記の方法で正しいのですが、現状では「xhtml」の拡張子は未対応のブラウザがあり、使えませんのでCDATAセクションは利用しないほうが懸命でしょう。CSSは外部に置いたスタイルシートを利用します。特殊な記号をCSSファイル内で使う分には問題ありませんので、最も安全で確実な方法です。

　その際のCSSファイルの取り込みはHTMLと同じように、<link rel="stylesheet" type="text/css" href="～.css" />のリンク要素を使いますが、リンク要素の最後に「 />」と半角スペースひとつとスラッシュが入ることに注意してください。そのほかとして、xml-stylesheet処理命令（<?xml-stylesheet type="text/css" href="CSSファイル"?>）を使った方法もありますが、対応していないブラウザや携帯端末があるので本稿は割愛します。

XHTMLでは、style要素およびscript要素の要素内容（スクリプト）で使っている <、&、-- などの記号は、特別な記号として扱われます。どうしても style要素を使ってCSSを使いたい場合は、CDATAセクションは使わず、かつ、特殊文字を使わずに指定するか以下のようにCSSソースを「」のコメントタグで囲ってください。つまり、HTML文書のstyle要素の使い方とまったく同じです。

【ポイント】↓

　XHTML Basicではstyle要素および、style属性は使えません。また、XHTML1.1でstyle属性は非推奨とされています。 style属性を使うときは、使用するページにおいて、次のようなmeta要素を<head>～</head>の間に配置してください。

■XHTML文書における大文字小文字について

　XHTML文書では大文字小文字が区別され、要素名・属性名は（半角の）小文字を使う決まりがあります。また、CSSのほうもそれに合わせる必要があります。（同じ要素名・属性名の小文字を使う必要があります。）

■ & (アンパサンド）の取り扱い

　HTML 4.01同様、「&」(アンパサンドまたはアンド)はページのどこに使用してもソースは「&」となります。XHTMLの場合、HTMLと決定的に違うのは「&」を属性値の中で使用するとき、またはなんらかの処理系の一部として「&」をそのまま使うとエラーになります。例えば、属性値としてCGIのURI（URL）を記述する場合があります。具体的な例としてCGIカウンタを取り上げます。

【サンプル例】↓

↓（変更）

※作成ソフトによっては、XML形式で保存したときに自動的に&に置き換わる場合があります。（これについてはご確認ください。）

■XHTML文書におけるタグの扱いと空要素について

　XHTML文書では終了タグを省略することができません。空要素を除く、すべての要素に対して、開始タグと終了タグを付けます。例えば、改行タグであり、空要素のbr要素は<br></br>か<br/>と書きますが、既存（過去）のブラウザとの互換性を考りょし、実際には<br />と半角スペースひとつ入れて書きます。img要素も空要素ですから、同様に<img ～　/>と、最後に半角スペースひとつを入れます。そのほか、meta要素のすべて、および、link要素のタグの最後は、「～/>」ではなく、「～ />」と半角スペースひとつを最後に入れてください。（わからない場合は、ここのページソースをご参照ください。）

【参考/空要素】: area（XHTML Basic不可）・base・basefont（XHTML 1.0 のTransitional・Framesetのみ使えますが、非推奨）br・col・frame（XHTML 1.0 のFramesetのみ可）・hr（XHTML Basic不可）・img・input・isindex（XHTML1.0 StrictとXHTML1.1不可。非推奨）・link・meta・param

■空白の扱い

　XHTMLにおける属性値の中の空白文字（半角スペース・全角スペース）は先頭および末尾の空白は削除され、属性値の中の連続した空白文字の連なりはひとつの半角スペースとして扱われます。CSSソース内の空白の扱いは、HTMLと同じです。すなわち、半角スペース・タブ（タブキーによる余白取り）・改行を自由に入れることができます。ただし、CSSソース内の全角スペースがブラウザによってエラーとなるのはHTMLのときと同じです。使用は避けてください。

■XHTML文書における引用符

　XTHMLで使用する属性値は必ず、引用符で囲う必要があります。引用符は二重引用符（"）を使いますが、一重引用符（'）も使えます。

■URI（URL）の指定

　XHTML文書内でURL（厳密にはURI）をリンク指定に使った場合は、属性値の形になるので必然的に引用符で囲む形になります。CSSソース内のURL部分も二重引用符（"）または、一重引用符（'）で囲うことができます。また、http://～で始まる絶対URI指定でも同じように引用符で囲います。

url(back.gif)
url("back.gif")
url('back.gif')
url("http://～")

■XHTML文書におけるname属性とid属性

　XHTML1.1、XHTML Basicでは a要素とmap要素に対して「name属性」は廃止されており、使用できません。これ以外で使える場合でも a form frame iframe img map要素に対しては「name属性」ではなく、「id属性」を使うことが推奨されています。（廃止されている場合を除き）過去のブラウザとの互換性を考りょするときは、「name属性」も同時に指定します。applet要素の「name属性」はXHTML1.0 Transitional・Framesetで使えますが、非推奨の要素なので、代わりに「object要素」を使うことが推奨されています。

　XHTML1.0で a要素に対して「id属性」で指定した場合の補足ですが、同ページ内または、ほかのページの特定の位置へジャンプする場合は、フラグメント識別子を使った上で、リンク先（到達点）に「id属性」を指定します。フラグメント識別子とはリンク（出発点）として、href="URL＋#＋位置名"の#（シャープ）の後に続くページ作者が任意で付ける固有の名前のことです。その名前を付けた「id属性」をリンク先に配置することになります。（a要素に対しての「id属性」の具体的な使い方につきましは、別項「同じページの特定の位置にリンクする」および「ほかのページの特定の位置にリンクする」をご参照ください。）

　以下、XHTML1.0とXHTML1.1における「name属性」の対応状況を記載してありますので、参考にしてください。

■XHTML文書におけるname属性の対応状況

XHTML1.0 Strict（name属性が非対応の要素↓）: applet form frame iframe img

XHTML1.0 Strict（name属性が対応している要素↓）: 　a button input map meta object param select textarea

XHTML1.0 Transitional（非対応↓）: frame

XHTML1.0 Transitional（対応↓）: a applet button form iframe img input map meta object param select textarea

XHTML1.0 Frameset（対応↓）: a applet button form frame iframe img input map meta object param select textarea

XHTML1.1（非対応↓）: a applet form frame iframe img map

XHTML1.1（対応↓）: button input meta object param select textarea

XHTML Basic（非対応↓）: a applet button form frame iframe img map

XHTML Basic（対応↓）: input meta object param select textarea

■XHTML1.0 StrictとXHTML1.1で対応しない要素↓

applet basefont center dir font frame frameset iframe isindex menu noframes s strike u

※掲載していませんがこれ以外に、XHTML1.0 Strictではルビ（ruby）関連の要素が対応していません。

■XHTMLにおけるCSSで使える単位について

　XHTML文書との併用におけるCSSで使える単位についてはHTMLと同じです。「実数＋単位」の単位は、エム（em）、エックス（ex）、ピクセル（px）の相対値やインチ（in）、センチメートル（cm）、ミリメートル（mm）、ポイント（pt）、パイカ（pc）の絶対値ですが、「実数＋%」の値も使えます。（アクセシビリティの観点からできるだけ相対的な値を使うことを推奨します。）なお、長さをとして「0」を指定するときは単位を省略することができます。

■XHTML1.0、XHTML1.1、XHTML Basicの相違点

　XHTML1.0とXHTML1.1とXHTML Basicの違いを簡単にまとめると、次のようになります。

・ XHTMLでは言語を示す属性として、xml:lang属性を使いますが、XHTML1.0はXMLに未対応のブラウザへの補佐として、lang属性が追加できます。XHTML1.1、XHTML Basicはlang属性が使えない。（廃止）

・ XHTML1.1、XHTML Basicはa要素とmap要素に対してはname属性が使用できない。（廃止）代わりに「id属性」を使います。（これは、「id属性」を認識できないブラウザでは、機能しないことを意味しています。）XHTML1.0の場合は既存のブラウザとの互換性を考りょし、「id属性」を指定した上で、「name属性」も指定できます。

・XHTML1.1はルビ（ふりがな）関連の要素が使える。

■そのほか

　ここに掲載したルール以外にも細かいところでルールがあります。例えば、属性値の中での改行はエラーとなります。特殊な使い方や非推奨の要素や属性の使用は避け、基本に忠実な書き方を心がけて、最終的にブラウザで確認すれば大丈夫だと思います。（文法通りのXHTML文書作成には種類の違うブラウザでの確認または、W3Cのマークアップ検証サービス（英語）で確認することをおすすめします。）参考：「XHTMLの検証をする」

XHTML/CSS・目次 | XHTML・目次