印刷用表示へ切り替え 通常表示へ切り替え 更新履歴を表示 更新履歴を隠す
Sun March 06, 2005
MovableType XHTML 1.0 Transitional から Strict へ

Movable Type のテンプレートを修正して，XHTML 1.0 Transitional から XHTML 1.0 Strict へ移行する。

■ ■ ■

XHTML は，現在最も広く用いられているマークアップ言語 HTML 4 を，次世代のマークアップ言語である XML ベースで書き直したものである(CYBER@GARDEN > XHTML講座 > XHTMLの基礎知識)。HTML 4 には，Transitional, Frameset, Strict という文書型がある。Strict は「厳密な」という意味で，マークアップ言語の目標である「文書の構造と体裁の分離」を重視し，これを厳密にしたものである。Transitional というのは「移行期」という意味で，目標となる Strict を睨みつつ，過去の書式も許すという大らかな仕様のことである(DOCTYPE - Document Type Declaration(jp))。Transitional には「間違いではないが，推奨もしない」書式が明示されている(HTML 4.0 - 使わない方がよい要素)。Transitional であっても，非推奨の書式を使わずに，見た目を同じように書くことができる。XHTML 1.0 は HTML 4 を再構成したものなので，HTML 4 と同様に Transitional, Frameset, Strict の3つの型があり，位置付けは HTML 4 のものと同様になっており，また非推奨の書式も HTML 4 と同じになっている。

さて，Movable Type のデフォルトテンプレートは XHTML 1.0 Transitional で書かれている。将来的には XHTML 1.1 に対応したいので，これに最も近い XHTML 1.0 Strict で正当な書式にするのがよい。しかしデフォルトテンプレートでは，非推奨の要素や属性がふんだんに使われているため，文書型の宣言を単に Transitional から Strict に変更しただけでは Strict として正しい書式にはならない。

以下は，Movable Type のデフォルトテンプレートを XHTML 1.0 Transitional から 1.0 Strict に変更する際の要点である。

テーブルの中央揃え: div 要素に align (アライン)属性は使えない

よくある設定:

<div align="center">
<table>
...
</table>
</div>

修正後:

<div>
<table style="margin: auto;">
...
</table>
</div>

あるいは:

<div>
<table style="margin-left: auto; margin-right: auto;">
...
</table>
</div>

カレンダーの背景色指定: bgcolor 属性は使えない (nlog(n): bgcolor は非推奨)

よくある設定:

<td bgcolor="#nnnnnn">

修正後:

<td style="background-color: #nnnnnn">

画像の右寄せ: img 要素に align 属性は使えない

よくある設定:

<img ... align="right" />

修正後:

<img ... style="float: right" />

画像のリンクの枠線を消す:img 要素に border 属性は使えない

デフォルト:

<img ... border="0" />

修正後:

<img ... style="border: none" />

または

<img ... style="border-width: 0" />

または

<img ... style="border-width: 0px" />

ただし，今までに沢山投稿している画像のタグ全てに，この border="0" 属性がついてしまっているという問題がある。これについては，プラグインを新たに書いて対処した。

さて，上記の書き換えでは，属性を style="..." の形式で書き換えているが，これが最終形ではない。style="..." という形式はあくまで「臨時」である。これでは，文書の構造と見た目を分離できているとは言えない。最終的には style="..." の「...」の部分をスタイルシートに書き，これにクラス名をつけて class="クラス名" としてスタイルを呼ぶべきである。

XHTML 1.0 Strict では，form 要素の name 属性が使えない。name を id に書き換える必要がある。id にすると，個別アーカイブのコメントフォームに使っている Javascript が使えなくなってしまう。解決方法は，Ogawa::Memoranda: XHTML 1.0 Strictなコメントフォーム や ADP: クッキーとValidなStrict HTML（続々） にある。

Transitional から Strict への書き換え作業の進め方

私は以下のように作業を進めた。

  1. Another HTML-lint gateway で次のようにチェックボックスにマークしてチェック
    「。」にマーク
    「XHTML1.0 Strict」にマーク
  2. エラーがなくなるまで，テンプレートの修正とチェックを繰り返す
  3. 文書型宣言を Transitional から Strict に変更する (参考: W3C QA - List of valid DTDs)
    Transitional:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. Another HTML-lint gateway で，上でつけたマークを外してチェック
  5. The W3C Markup Validation Service でチェックして Valid のマークをもらう
    Valid XHTML 1.0!
    Valid XHTML 1.0!

2013年3月6日追記:
XHTML+RDFa 1.1 に移行しました (nlog(n): OGP のメタタグの追加と XHTML+RDFa 1.1 への移行)。

Posted by n at 2005-03-06 22:34 | Edit | Comments (0) | Trackback(0)
Trackbacks

  • 「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
  • タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細は トラックバック送信時のエラー をご覧ください)
  • トラックバックする記事には，この記事へのリンクを含めてください(詳細は 迷惑トラックバック対策 をご覧ください)
Comments
Post a comment
  • 電子メールアドレスは必須ですが，表示されません (気になる場合は「メールアドレスのような」文字列でもOKです)
  • URL を入力した場合はリンクが張られます
  • コメント欄内ではタグは使えません
  • コメント欄内に URL を記入した場合は自動的にリンクに変換されます
  • コメント欄内の改行はそのまま改行となります
  • 「Confirmation Code」に表示されている数字を入力してください (迷惑コメント対策です)


(必須, 表示されます)


(必須, 表示されません)


(任意, リンクされます)


Confirmation Code (必須)


Remember info (R)?

‌