XHTML

ysd@KLab > XHTML

前書き

探す限り、殆どXHTMLの書き方をサポートしたところが(特にXHTML1.1)無いので自分で勝手に作りました。目的は「私自身が使いやすく」です。

XHTML 1.1 のテンプレート

文字コードは UTF-8 限定…というわけではなく、適切に変更してください。例としては 'Shift-JIS', 'EUC-JP', 'ISO-2022-JP' 等がよく使われるコードとして知られています。<base> や <link> のリンク先は適切な値を入力してください。 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="css/ysd.css" />
<title></title>
</head>
<body>
</body>
</html>

XHTMLからXMLのデータを呼び出す (MSIE専用)

こうすると、本来静的な(誰かがHTMLを書き換えないと変化しない)HTMLが(XML部分を変えるだけで)変化してくれます。 表などのデータが頻繁に入れ替わるときに、CGIでXMLだけ書き換えるようにすると誰でも書き換えられますし、 デザインだけ変更したい場合にも簡単に変更できます。以下の例は表を使う場合です。

<xml id="identifier" src="xml_file" />

<table datasrc="#identifier">
<tr>
<td><span datafld="tag1"></span></td>
<td><span datafld="tag2"></span></td>
</tr>
</table>
ちなみに XML データは XHTML 内に <xml></xml> で囲って書いても構いません。
<td> の datafld 属性や <xml> タグがMSIE専用です。 実際に Firefox を使ってみたら見られませんでした。残念。

ブロック要素をセンタリング

タイトル通り…と言ってはおしまいですが、多くのブラウザをサポートする方法です。

W3Cの勧告通りならば、本来は

<div style="width:600px; margin: 0px auto;">このブロックがセンタリングされる</div>
としてOKなはずです。ポイントは左右のマージンを auto にすることです。以下は実験結果。
このブロックがセンタリングされる

しかし、なぜかこれをIEはセンタリングしてくれません。そこで使われる手法が、ちょっと卑怯な形で

<div style="text-align:center;">
<div style="width:600px; text-align:left;">このブロックがセンタリングされる</div>
</div>
ということです。本来インライン要素しかセンタリングしない text-align:center を外側で使い、それが中身にまで影響しないよう内側で text-align:left を使ってます。 W3C勧告的にはNGな方法です。今実際、Operaではセンタリングされません。でもまぁとにかく、説明したIE対策だけのものもやってみましょう。
このブロックがセンタリングされる

そして最終的な結論ですが、上の2つの方法を組み合わせることで、殆どのブラウザをサポートできるようになります。

<div style="text-align:center;">
<div style="width:600px; text-align:left; border:solid; margin:0px auto">このブロックがセンタリングされる</div>
</div>

↓実験結果。

このブロックがセンタリングされる