後編

Movable Typeに間違ったページを作らせないための公式
主にブログツールなどの導入により、普及が進んでいる
XHTMLですが、「本当に正しい」XHTMLの書き方を、あな

講師 森田 雄たは理解していますか？ 全2回で解説する「正しいXHTML1975年生まれ。東芝EMIでマルチメディアCD-ROMのデザインおよの書き方」、後編となる今回は、少し高度な正しいXHTML

びオーサリングに多数携わった後、独立してフリーランスとなる。1998
年よりマイクロソフトに在籍し、モバイル戦略に携わる。2000年、XMLの書き方の公式と、実際にエントリーを書く場合の例を紹介

をはじめとする多様なプロトコルの専門家としてビジネス・アーキテクします。前号に引き続き、正しいXHTMLを実現した、オリジツの設立に参画。現在、ユーザビリティーおよびアクセシビリティーのナルのMovable Type完全テンプレートセットをベースとしてスペシャリストとして活躍中。 yumor@b-architects.com
http://www.b-architects.com/

いますので、ダウンロードして使いながら試してください。

上級編XHTMLマークアップの「公式」
後編では、少し高度な公式を説明しま前号では、正しいXHTMLを書くことが公式は、文章の基本マークアップ、強調、なぜ大切なのかの理由と、基本的なペー引用、箇条書き、リンク、アスキーアート、すので、XHTMLの基本を理解していない

ジ要素に関して正しいXHTMLを書くため見出しなどがあり、さらに XHTMLの基礎場合は、まず前編の内容を確認してからの「公式」を解説しました。前回解説した的な知識も解説しました。

後編に入ってください。

【公式11】：変更（挿入・削除）＜del要素・ins要素＞
公開した記事にあとから文章を挿入・削除する場合、挿入した部分をins 要素で、削除したと示したい部分をdel要素でマークアップすれば、どのように変更されたのかを明らかにできます。挿入・削除は、ブロックレベル要素ごとでもできます。
ins要素とdel要素には、挿入・削除した<p>夕食の<del>ビーフカレー</del><ins>マトンカレー</ins>は、肉がすごくおいしかった。
</p><p>前日から<ins datetime="2004-01-28T05:38:00+09:00">ニンニクに漬け込んで</ins>下ごしらえをしていただけのことはある。<del datetime="2004-0128T05:38:00+09:00">少し固かったが。</del></p><ins><p>おいしいカレーなら何日でも続けて食べられる。</p></ins>

D このXHTMLをブラウザーで表示すると……

日時を記すための datetime 属性というものがあり、「yyyy-mm-ddThh:mm:ss+09:00」のように書きます（日本標準時の場合）
。
「T」
はそのまま
「T」と書き、それ以外には年月日と時分秒を入れます。datetime 属性はなくても構いませんが、入れておいたほうが情報の付加価値は増します。

130 +++ iNTERNET magazine 2004.11 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D【公式12】：ルビ（ふりがな）＜ruby要素＞
XHTML 1.1にはルビモジュールが導入されているので、ルビ（ふりがな）を使え<p>こちらこそ<ruby><rb>夜露死苦</rb><rp>（</rp><rt>ヨロシク</rt><rp>）</rp></ruby>お願いします。</p>

ます
（右図上）
。ルビ表示に対応していな

D このXHTMLをブラウザーで表示すると……

いブラウザーでは、ルビ対象になる文字列に続いてルビをかっこで囲んで表示するようにも指定できます（右図下）。
ルビを付けたい漢字などを<rb>〜</rb>で囲み、ルビが表示できないときに使いたいかっこの開き部分を<rp>〜</rp>で、ルビを<rt>〜</rt>で、閉じかっこをこちらも <rp> 〜 </rp> で指定して、その全体を<ruby>〜</ruby>で囲みます。

XHTML 1.1準拠のフルセット

Movable Type用オリジナルテンプレート
XHTML 1.1に準拠したオリジナルのMTテンプレートを、本稿の付録として用意しています。このテンプレートを使えば、ページのXHTMLダウンロードできるテンプレート

は「正しいXHTML」になります。あとは、記事の本文に正しいXHTML

インデックス・テンプレートを書けば完成です。

・Main Index

トップページ用の Main Indexとスタイルシートだけでなく、各アーカ

・Stylesheet

イブページやコメントページ用のテンプレートが含まれたフルセットになっています。

アーカイブに関連したテンプレート

なお、Stylesheetテンプレートでの表示は、ウィンドウズ版の IE 6、・Category Archive

Mac版のIE 5.1以降、Safari 1.0以降、Mozilla 1.5以降で見ることを想・Date-Based Archive

定して構成されています。

・Individual Entry Archive
その他のテンプレート
・Comment Preview Template・Comment Error Template・TrackBack Listing Template

テンプレートのダウンロードはインターネットマガジンのウェブサイトから！
http://internet.impress.co.jp/im/200410mt/※注意
このオリジナルテンプレートはカテゴリー設定を処理するように作られているため、正しく使用するためにはMovable Typeのブログの設定でカテゴリーアーカイブが有効になっている必要があります。標準の状態ではカテゴリーアーカイブは有効になっていないので、その状態でブログを再構築するとエラーが発生してしまいます。
カテゴリーアーカイブを有効にするには、Movable Typeの管理画面でオリジナルテンプレートを使用するブログの管理画面を開き、［ブログの設定］＞［アーカイブの設定］で［アーカイブの種類］にある［Category］にチェックを入れます。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.11 +++131

【公式13】：プログラムコード＜pre要素＋code要素＞
HTMLでは連続した半角スペースは意味を持ちませんが、プログラムコードではインデントなどの用途で使われるために、意味を失われては困ることがあります。そこで、書いたとおりの改行や空白がそのまま表示に反映される整形済みテキストのpre要素とし、さらにコードを表すcode要素を使います。
付録のStylesheetテンプレートでは、バグ対策のために Mac版 IE 5では他のブ<pre><code>function initWindow(ww,wh) {var scrx, scry, cx, cy;
scrx = screen.availWidth;scry = screen.availHeight;
cx = (scrx / 2) - (ww / 2);
cy = (scry / 2) - (wh / 2);
window.resizeTo(ww,wh);window.moveTo(cx,cy);}</code></pre>

D このXHTMLをブラウザーで表示すると……

ラウザーとは違うスタイルが設定されています。内容がボックス幅を超えないように、各行に適宜改行を入れるようにしましょう。また、整形済みテキストにプロポーショナルフォントを指定していますが、プログラムコードには等幅フォントを指定しています。

【公式14】：画像の埋め込み＜img要素＞
画像を配置する場合は、p 要素の中にimg要素を入れます。画像には縁取りが出<p><img src="/images/picture.jpg" width="128" height="105"style="width:128px;height:105px;" alt="そのまま配置された画像" /></p>ないスタイルになっているので、縁取りが欲しいときは、画像自体を加工するように

D このXHTMLをブラウザーで表示すると……

してください。
src属性は画像ファイルの場所をルートディレクトリーからの絶対パスで書くといいでしょう。右の例は、サーバー上にある「images」ディレクトリーに画像ファイルが置いてある場合の書き方です。
width属性には画像の幅を、height属性には画像の高さをそれぞれピクセル数値で書き入れます。ウィンドウズ版IEのバグ対複数の画像を横に並べたい場合は、同一の p 要素内で、img 要素を複数書きます。縦に並べたい場合は、br要素で改行するのではなく、1つずつp要素で囲みましょう。これに限らず、基本的にはbr要素を使わないようにマークアップす
ると、XHTMLとして美しくなります。

策のために、style属性中の2つの数値にも、それぞれwidth属性とheight属性に書き入れたピクセル数値を書いてください。
alt属性には、src属性で指定された画像によって得られる情報を「代替テキスト」として文章で書き入れます。

132 +++ iNTERNET magazine 2004.11 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

「<」
「>」
「&」
「"」は文字実体参照でと書きます。

「<」や「>」の記号は、XHTMLのタグに使う特みを利用して書き換える必要があります。

別な記号なので、文章中にそのまま書くとペ具体的には「<」は「&lt;」に、「>」は「&gt;」に書二重引用符号（"）
は、通常はそのまま「"」と書ージがおかしくなります。MTの自動整形を使き換えると、ブラウザーで表示される際にはそいていいのですが、画像のalt属性などの属性うと自動的に処理してくれますが、自動整形をれぞれ「<」「>」と表示されるようになります。

値の中に「"」を書くときは、「&quot;」と書く必

使わずにエントリーを書く場合には、これらのアンド記号（&）
もまた特別な記号なので、通要があります。属性値は「"」で括って記述する

記号を書くときは「文字実体参照」という仕組常の文章などに「&」を書きたいときは「&amp;」

ため、中に「"」があると問題が生じるのです。

【公式15】：画像に回り込むテキスト＜p要素とimg要素の属性指定＞
画像をただ配置するのではなく、続くテキストを回り込み表示させる場合の公式です。画像の左側にテキストが回り込む
ものはimgRightクラス、右側にテキストが回り込むものはimgLeftクラスとして、2とおりのスタイルを用意しています。
この「公式」は、ウィンドウズ版IEなどいくつかのブラウザーのバグ対策を含んだものになっています。img要素のheight属性に書いたのと同じ値を、p要素のstyle<p style="min-height:105px;height:105px;/*\*/height:auto;/**/_height:105px;"
class="withImage"><img src="/images/picture1.jpg" width="128" height="105"style="width:128px;height:105px;" alt="ネガ画像なぞなぞ" class="imgRight" />文章が左側で回り込むような配置の写真。ネガ画像にすると何が写っているのかぜんぜんわからなくなる場合があります。
さて、この画像は何の画像でしょうか。</p><p style="min-height:105px;height:105px;/*\*/height:auto;/**/_height:105px;"
class="withImage"><img src="/images/picture2.jpg" width="128" height="105"style="width:128px;height:105px;" alt="なぞなぞの正解画像" class="imgLeft" />文章が右側で回り込むような配置の写真。答えはカボチャです。このように、画像の色を反転してネガフィルムのようにするだけでも、おもしろい効果を得られますね。</p>D このXHTMLをブラウザーで表示すると……

属性内の該当する3か所にも書きます。さらに、img要素ではwidth属性とheight属性に加えて、style属性にwidthプロパティーとheightプロパティーを書きます。
回り込みテキストは p 要素以外では設定できません。

回り込みテキストのスタイルはなぜ複雑なの？
画像に回り込むテキストのp要素のstyle属性的に大きくなります。ところが、WinIE6 や容となる画像の縦幅を指定します（①）
。

が複雑なのは、ブラウザーごとに違うスタイル

MacIE5は、min-heightプロパティーを解釈せ次にmin-heightを解釈しないブラウザー用に、シートの解釈を吸収するためです。

ず、heightプロパティーがmin-heightプロパheightで同じ縦幅を指定します（②）
。

ティーであるかのように動作します。heightにmin-heightを正しく理解するMozillaなどのブ

style="①min-height:105px; ②height:105px;③/*¥*/height:auto; /**/④̲height:105px;"

絶対値の長さを指定していると、内容がそのラウザーでは、heightに指定された絶対値の高さを超える場合、ボックスサイズが勝手に広長さ以上にはボックスサイズが広がらないのウィンドウズ版 IE 6（WinIE6）や Mac版 IE 5がってしまうのです（仕様に反する動作です）。

で、「auto」
を指定してheightプロパティーを上（MacIE5）などは、ボックスの最小の高さを指そこで、同じプロパティーを複数回指定すると書きします。ただし、ここで、MacIE5のコメン定するmin-heightプロパティーを解釈しませあとから読み込んだ値を使うというCSSのル

ト記述の解釈バグを利用して、この記述をん。通常、min-heightに絶対値の長さを指定ールと、ブラウザーがCSSを読み込む際のバMacIE5にだけ読めないようにします（③）
。

するときは、heightプロパティーに「auto」を指グを利用して、ブラウザーごとに違う値を指定③の指定でWinIE6はheight:autoを理解する

定しておけば、ボックスサイズがmin-heightよしているのがこの公式です。

ので、最後にWinIE6が解釈できる書き方でりも大きくなる場合は、ボックスサイズは自動p要素のstyle属性には、まずmin-heightで内heightの指定を上書きしています（④）
。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.11 +++133

実際にエントリーをマークアップしてみよう①p要素で段落をマークアップ

マークアップ例1：
簡単なエントリー
さて、「公式」はだいたい頭に入ったでしょうか。実際のエントリーのマークアップ

名古屋・松坂屋本店の屋上で、古びたぱんだカーを発見しまして、すわ今こそとばかりに乗ってみました。なかなかの乗り心地で、良い思い出になりました。
ちなみに松坂屋へはコレに乗るために行ったのではなくて、もちろん昼ごはんとかを適当に食べるために行ったわけなのですが、ちょっとレストラン街のある階の構造が微妙な感じで、やや道に迷い気味で屋上へ出てしまったのでした。結果オーライ。

は、エントリーに書こうと思っている日本語

Dの文章をまず書き、その文章を、「公式」を利用してマークアップしていくような流れで実現できます。
たとえば、①のような日記のエントリー用の文章があったとします。
この文章には、小さな段落が2つあります。
「名古屋」から「なりました。
」までが1つ②p要素で段落をマークアップ<p>名古屋・松坂屋本店の屋上で、古びたぱんだカーを発見しまして、すわ今こそとばかりに乗ってみました。なかなかの乗り心地で、良い思い出になりました。</p><p>ちなみに松坂屋へはコレに乗るために行ったのではなくて、もちろん昼ごはんとかを適当に食べるために行ったわけなのですが、ちょっとレストラン街のある階の構造が微妙な感じで、やや道に迷い気味で屋上へ出てしまったのでした。結果オーライ。</p>の段落、残りがもう1つの段落です。これ

Dらは通常の文章なので、どちらもp要素で③画像の埋め込みと回り込みをマークアップ意味づけします（②）
。
そして、実際にぱんだカーに乗っている写真が手元にありますので、せっかくですからそれを挿絵にしたいとします。1つ目の段落のところが、ちょうどその写真に見合う内容なので、1つ目のp要素を、画像へ<p style="min-height:105px;height:105px;/*\*/height:auto;/**/_height:105px;" class="withImage"><img src="/images/panda.jpg"
width="128" height="105" style="width:128px;height:105px;" alt="【写真】
ぱんだカーに跨る森田雄" class="imgLeft" />名古屋・松坂屋本店の屋上で、古びたぱんだカーを発見しまして、すわ今こそとばかりに乗ってみました。なかなかの乗り心地で、良い思い出になりました。</p>の回り込みテキストで利用するp 要素に変えてみます（③）
。
このマークアップ済みのものに、④の<p>ちなみに松坂屋へはコレに乗るために行ったのではなくて、もちろん昼ごはんとかを適当に食べるために行ったわけなのですが、ちょっとレストラン街のある階の構造が微妙な感じで、やや道に迷い気味で屋上へ出てしまったのでした。結果オーライ。</p>

ようにタイトルを付けたりカテゴリーを付けたりしてエントリーとして保存すれば、⑤Dのようになります。
④タイトルやカテゴリーを指定⑤正しいXHTMLのエントリーが完成

F

134 +++ iNTERNET magazine 2004.11 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

⑥マークアップ前の文章

マークアップ例2：
複雑な構造のエントリー
もう1つ、より多くの要素でマークアップする文章の例を見てみましょう（⑥）
。
最初の行は通常の文章（p要素）、続く「以下のコード」の3行はプログラムコード、その次にまた通常の文章（p 要素）
ときます。HTML4.01のDTDを引用している部分は、プログラムコードをブロックレベルとして引用しましょう。そして最後に通常の文章（p要素）のようにマークアップでき以下のコードは、HTML 4.01 Strictとして妥当です。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><title>妥当な文書のタイトル</title><p>妥当な文書のパラグラフ</p>html要素の開始タグと終了タグは書かれてませんが、それは省略可だからです。そしてhtml要素の内容は、head要素、body要素の順で1つずつ必須であるとDTDに書かれていますが、やはりどちらの要素の開始タグも終了タグも書かれていません。これもまたそれぞれ省略可だからです。
<!ENTITY % html.content "HEAD, BODY"><!ELEMENT HTML O O (%html.content;)-- document root element --><!ATTLIST HTML%i18n;-- lang, dir ->「HTML 4 Document Type Definition」から
しかしhtml要素もhead要素もbody要素も、いずれも要素は存在しています。
DOCTYPE宣言の直後からtitle要素の終了タグまでがhead要素であり、p要素の開始タグから終了タグまでの範囲がbody要素なわけです。要素が必須か否かと、タグが省略できるか否かは、同列のコトじゃないのです。

ます。プログラムコード中に特別な記号である「<」「>」が含まれていますので、これらはそれぞれ文字実体参照に書き直しておく必要があります（⑦）
。
日本語の文章さえあれば、文章を構成する各要素を適切なXHTMLの要素で意味づけすることで、正しいXHTMLで書かれたエントリーにできます。多少時間はかかりますが、それだけ文章を推敲する時間も得られて良い文章になるでしょう。正しい XHTML になることに加えて、ウェブログの内容も充実させられますね。
今回の公式で物足りなくなったら、自分で「正しいXHTMLの公式」を作っていきましょう。その際に役に立つ情報源を下に紹介しますので、ぜひ参考にしてください。

D⑦段落、コード、引用、文字参照をマークアップ<p>以下のコードは、HTML 4.01 Strictとして妥当です。</p><pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"&gt;&lt;title&gt;妥当な文書のタイトル&lt;/title&gt;&lt;p&gt;妥当な文書のパラグラフ&lt;/p&gt;</code></pre><p>html要素の開始タグと終了タグは書かれてませんが、それは省略可だからです。そしてhtml要素の内容は、head要素、body要素の順で1つずつ必須であるとDTDに書かれていますが、やはりどちらの要素の開始タグも終了タグも書かれていません。これもまたそれぞれ省略可だからです。</p><blockquote cite="http://www.w3.org/TR/html401/sgml/dtd.html#html. content"><div class="quote"><pre><code>&lt;!ENTITY % html.content "HEAD, BODY"&gt;&lt;!ELEMENT HTML O O (%html.content;)-- document root element --&gt;&lt;!ATTLIST HTML%i18n;-- lang, dir -&gt;</code></pre><!--/quote--></div><ul class="cite"><li><cite>サイト名「<a href="http://www.w3.org/TR/html401/sgml/dtd.html#html.content">
HTML 4 Document Type Definition</a>」から</cite></li></ul></blockquote><p>しかしhtml要素もhead要素もbody要素も、いずれも要素は存在しています。</p><p>DOCTYPE宣言の直後からtitle要素の終了タグまでがhead要素であり、p要素の開始タグから終了タグまでの範囲がbody要素なわけです。要素が必須か否かと、タグが省略できるか否かは、同列のコトじゃないのです。</p>

正しいXHTMLをさらに知るために●HTML 4.01仕様書●XHTML 1.1 - モジュールベースXHTML●ユニバーサルHTML/XHTML

W3Cの HTML 4.01仕 様 書 の 邦 訳 で す。

W3Cの XHTML 1.1仕 様 書 の 邦 訳 で す。

XHTMLの元になった文書構造や要素・属性のXHTML 1.0とXHTML 1.1の違いが主な内容

毎日コミュニケーションズ刊／360p／2,310円／ISBN4-8399-0454-5

考え方、使い方などが詳細に解説されています。

です。

●詳解 HTML&XHTML&CSS辞典

http://www.asahi-net.or.jp/~sd5a-ucd/
rec-html401j/cover.html

http://www.doraneko.org/webauth/xhtml11/20010531/Overview.html

秀和システム刊／566p／2,100円／ISBN4-7980-0221-6● XHTML 1.0: 拡張可能ハイパーテキストマ●Cascading Style Sheets, Level 2●スタイルシート スタンダード・デザインガイドークアップ言語

W3Cの CSS 2.0仕様書の邦訳です。正しいW3CのXHTML 1.0仕様書の邦訳です。これ

XHTMLをCSSでデザインしてみましょう。正しい

毎日コミュニケーションズ刊／303p／2,730円／ISBN4-8399-1501-6

を読んでHTML 4.01との違いを理解しましょう。

XHTMLである必要性も、ここから学べます。

●スタイルシート・スタイルブック

http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html

http://www.y-adagio.com/public/
standards/tr_css2/toc.html

翔泳社／207p／2,310円／ISBN4-7981-0585-6

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.11 +++135

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.