M

o

我

流

v
の

a
カ

b
ス

l

タ

マ

e
イ

T

ズ

は

も

y

p

e

う

卒

業

特集2

プロが教える
Movable Typeの構造デザイン

Business Architects Inc.
text/template & css design :森田 雄
visual design :荻野 智成／増尾 金弥
layout adjustment :小久保 浩大郎
株式会社ビジネス・アーキテクツは、企業のウェブサイトを通じた情報発信を助ける、ウェブのプロ集団である。

http://www.b-architects.com/

本

誌

書

き

デ

ザ

用
下
イ

ろ

に
し

ン ！

この記事で作ったテンプレートファイルと記事オリジナルのテンプレートとCSSをダウンロード

98 +++ iNTERNET magazine 2003.11 +++CSSファイルがダウンロードできます。
http://internet.impress.co.jp/im/200311mt/
誌面の都合上解説では一部のコードを省略していますので、ダウンロードした
テンプレートファイルを参照しながら読むとより理解しやすくなるでしょう。

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

Part.1

構造も文法もよろしくないMTテンプレートのXHTML

1

正しくないテンプレートからは正しい出力はされない！

ページテンプレートとCSSで内容や見栄えを制御

Indexテンプレートなどが生成するページ

書構造（XHTMLページの構造）
ありきなのの構成要素は変わらないということだ。

だ。CSSをうまく適用するには、適当に組み立てたXHTML文書ではなく、正しいと

最 近 流 行 の Movable Type（ 以 下「MT」）
は、細かいXHTMLの文法などを気

土台のテンプレート
あなたのは「正しい」？

か妥当とかいう表現の似合う文書構造を持ったXHTMLが求められるわけだ。あくまで構造の外観しか定義できないCSSでにしなくても、エントリー（記事内容）を入
力すれば一定の構造と見栄えのページ

皆さんも、MTのデザインを変更しよう

は、Main Indexテンプレートが生成する（図1）
が生成される「ウェブログ」ツールだと思って、「面倒くさい」だとか「難しい」だ

文書構造を正しく直すことができない。つと言われている。ウェブログはコンテンツとか感じたことはないだろうか。筆者は前

まり、Stylesheetテンプレートで思いどおが重要だとはよく言われるが、やはりその述 のとおりのことを 考 えていた ので、りにデザインするには、Main Indexテン

見栄えも気になることだろう。

Stylesheetテンプレートだけを書き換えらプレートで文書構造を適切に設計してお入力されたエントリーをどのように処理れれば、つまりはCSSでのデザインやレ

く、すなわち構造をデザインしておく必要

してページを作るかを決めるのに「テンプイアウトというものがわかってさえいればがあるのだ。

レート」という仕組みが使われていること自由自在だと思っていた。しかし、実際のというわけで、標準のMain Indexテン

は、MTを使っている人ならよく知っている

ところ、Stylesheetテンプレートの変更だ

プレートが生成する文書構造を、まあこん

はずだ。XHTMLでウェブページを出力す

けでは設計どおりのデザインにはならず、なものだろうという辺りまでの粗さで図にる部分だけでなく、ページの見た目を決め

もどかしい思いをすることになった。

してみた
（図2）
。正直な感想を言うと、「目るスタイルシートや、ウェブログならではの

さて、これはどういうことなのだろう。なも当てられない状態」だ。これをどうにか

RDF／RSSによるメタデータファイルも、んといっても大前提として、CSSはまず文して妥当なものにしなければならないの

やはりテンプレートから生成されている。
MTでは、ページに対応したテンプレー
ト（たとえばMain Indexテンプレートはト

図1

MTの標準テンプレートから出力されるページ

ップページの内容を決める）
は、ページの
内容をどのような構造のXHTMLで出力するかを定義し、Stylesheetテンプレートは
その XHTML 文書の構造をページとして「どう見せるか」を定義する。ページに対応したテンプレートはMTタグと呼ばれる独自のテンプレートタグを含んだXHTMLで作られているが、Stylesheetテンプレー
トの内容は単なるCSS（Cascading Style
Sheets）
だ。
たとえばウェブログサイトの顔とも言えるMain Indexテンプレートのページの構
成要素が標準の状態のままでいいのであ
れば、あとはStylesheetテンプレートを変更すれば、その見栄えをどうにでもできるというのが一般的な認識だろう。しかし注意しなければいけないのは、どのようなStylesheet テンプレートにしても、Main

標準のMovable Typeテンプレートで作られたページは一見問題ないように見えるが……。

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

99

図2

MTの標準のMain Indexテンプレートの構造ツリー図
html

head
body

div id=banner

div id=content

h1#PCDATA

span class=description#PCDATA

div class=blog

h2#PCDATA

div class=blogbody

太枠はブロックレベル要素（または相当する要素）。
黒枠はブロックレベル要素であろうと思われるがインライン
要素で意味付けされているもの。

div id=links

背景が塗りつぶされている要
素はまとまって繰り返し登場する。h2要素のみ、直前のエントリーが同じ日付ならばそのまとまりからは除かれる。
#PCDATAというのは、よ
うするにテキストのことだが、実際にはそれだけではなく、ほかにインライン要
素も入ってくる。

div class=calendarh3#PCDATAp#PCDATA

span class=extended#PCDATA

div class=posted#PCDATA

table

div class=sidetitle#PCDATA

div class=side#PCDATA

div class=sidetitle#PCDATA

div class=side#PCDATA

div class=sidetitle#PCDATA

div class=side#PCDATA

div class=sidetitle#PCDATA

div class=syndicate#PCDATA

div class=powered#PCDATA

標準のMain Indexの構造は冗長で複雑だ。

で、まずは現状を把握しよう。どこがよろえられ、たとえば部・章・節の各見出しのid=links要素だが、ここも階層構造の問題

しくないのか、代表的なものをざっと挙げような関係だと言える。div id=content

点と同様に特にひどい部分だ。

てみるので、MTの標準 Main Indexテン

要素内にあるh2要素やh3要素は、それぞ

たとえば標準では検索フォームの入力

プレートと図2、図3を参照しながら読みれ確かに見出しであると考えられるが、h1

フィールドの上には「Search」という文字進めてほしい。

要素とブロックレベルで違う構造になって列（入力フィールドに対する見出し）が表しまっている。親要素のbody要素から見示されるが、その文字列はsidetitleというたとき、h1要素を内包するdiv id=banner

クラス名を備えたdiv要素で意味づけされ要素と h2／ h3要素を内包する div id=ているのだ。入力フィールドはsideというcontent要素とが、並列の関係になってしクラス名を備えたdiv要素として意味づけまっているわけだ。これは、文書構造としされている。つまり、sideクラスの内容にてあまりいい関係だとは言えない。

対する見出しのようなものだから、sidetitle

標準MTテンプレートの問題点：
div 要素の階層構造がよろしくない
div要素というのは、汎用的なブロック
レベルの要素で入れ子にすれば階層構造

また、div id=content要素の直下にdivも作れるものだ。まず div id=banner要class=blog要素があるのも変だろう。だ

素を見てみよう。この div 要素の中には、

いたい、div id=content要素の中にはdivだが、構造上は並列扱いであってセットだ

ウェブログの名前であるh1 要素と、ウェclass=blog要素以外のものが何もないのという意味づけがなされていないのが問ブログの説明がspan class=description

だから、このどちらかのdiv要素は余計な題だ。

要素として入っている。ウェブログの名前

ブロックレベル要素であると言える。

はそのページ全体に影響を及ぼしている
一番大きな見出しなので、h1要素なのはこれらの階層構造を文書構造として適切なものにしなければいけない。

要素が、ウェブログの名前と説明だけを内なことになってくる。h1要素を大見出しだ

標準MTテンプレートの問題点：
関係あるものが並列の構造になっている

100 +++ iNTERNET magazine 2003.11 +++同様の組み合わせが、続く月別アーカ
イブ一覧である「Archives」、最近のエントリー一覧の「Recent Entries」、そしてLinks」のリンク一覧にも現れる。上からこの順に並ぶように表示することしか頭にないのならともかく、たとえば月別アーカ
イブ一覧のタイトルと内容をほかのところとすると、h2要素は中見出し、h3要素は小見出しだ。これは親子関係であると考

この2つのdiv要素は意味的にはセット

好きなリンクを追 加 できる「 Add Your

問題ない。しかし、となるとdiv id=banner
包したところで終了してしまうのはおかしクラスだというわけなのだろう。

カレンダーやリンク集が入っているdivへ表示したいときなどは、2つのブロック

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

図3

標準のMain Indexテンプレートの出力と構造の関係
XHTMLの文法とHTMLの文法は違うものである

h1

div id=bannerspan class=descriptionh2h3

M T の 標 準 では 出 力 に X H T M L を使う。

div class=calendar

XHTMLは文法が厳格であり、正しく書かな
ければ XML 文書としての利用ができなくな

div class=sidetitle
span class=extended
div class=posted

div class=side

div class=blogbody
div class=sidetitle
div class=sideってしまう。最低限の文法は覚えてほしい。
・要素名と属性名はすべて小文字「<TABLE>」ではなく「<table>」とするのが正しい。大文字と小文字が区別されるので、

div class=sidetitle

別のタグだと見なされるのだ。

div class=side

・終了タグを省略できない

div class=sidetitle
div class=side
div class=syndicate

HTML 4では省略を許されていた終了タグを省略してはならない。

div class=powered

・空要素タグを終結させる
たとえば<img />や<hr />というようにタグを「/>」で終わらせる必要がある。
・属性値は引用符で囲む<td colspan=3>のような属性値は、XHTML
ではすべて<td colspan= 3 >のように引用符で囲むのが正しい。
・属性を最小化しない
div id=links

div class=blog

div id=content

XHTMLは属性の最小化を許容しないため、た と え ば <dl compact>で は な く、<dlcompact="compact">と書く。

複雑な構造のために、スタイルシートを作るのも一苦労だ。

また、これは文法ではないが、XHTML文書
はレベル要素をそれぞれ動かさなければなな意味づけをしたいときなどに、p要素中らない。そもそも、タイトルと内容が全然の該当箇所でspan要素を使ったりする。

XML文書でもあるため、文書で使っているXMLのバージョンや文字コードを示す
XML宣言が文書の先頭に必須だ。

違う場所に配置されるということは考えらとなると、div id=banner要素の中にあれないので、これらのdiv要素はそれぞれ、るウェブ ログ の 説 明 の 部 分 が、s p a n

対であることが明確な要素として意味づけ

class=description要素だというのはいた

しておくべきものだ。

だけない。ウェブログの説明は1つの段落

そして、先ほども触れた div id=links要を成すものと考えられるので、ブロックレ

素の中身だが、ここはdiv要素の構造がよのはおかしいだろう。

標準MTテンプレートの問題点：
きちんと意味づけされていない

ベルの要素であるp要素とするのが順当

ろしくないだけでなく、内包しているほとんだ。

どのデータをそのままdiv要素でもって意

さらに、div class=blog要素には、h2味づけしてしまっている。XHTMLで定義

div要素というのは、特に何だという意

要素とdiv class=blogbody要素が入って済み要素に適切なものがないというのな

味づけであるという定義がなされていな

おり、div class=blogbody要素には h3、らともかく、定義済みの要素で適したもの

い、汎用的なブロックレベルの要素だと

p、 span class=extended、 div class=があるのならば、それらで意味づけするこ説明した。使いどころはと言うと、XHTML

postedという各要素が入っている。divとで、要素を適切に明示できる。困ったが備えている各要素ではうまく意味づけしclass=blog要素とその内容までは問題な

ときのdiv要素というのもアリだが、困っきれない場合や、要素間の結びつきを明

さそうだが、div class=blogbody要素のていないならdiv要素だけで意味づけする

示してやろうという場合などが考えられる。

中身の後半 2 つはあまりよろしくない。

のではなく定義済みの要素を使うべきだ。

ブロックレベルではなくインライン要素のspan class=extended要素の内容は「こdiv class=sidetitle要素とdiv class=side要

汎用的なものとしては、span要素がある。

の記事の続きを読む」
といったような文章

素の対などは、たとえばdl要素を使うとす

こちらはブロックレベルではないために、になるはずなので、ここにはp要素を使うっきりする。

要素間の結びつきを明示することには使のが適切だろう（少なくともspan要素ではいづらい。span要素を使うことがある場ない）。div class=posted要素も、含ま面と言えばp要素の中だろう。もっと明確れる内容を考えるとdiv要素単独だという

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

Part.2

コレが「正しい」構造のテンプレートだ！

意味づけを考えてゴチャゴチャしない理想の形に

2

テンプレートをどう直したら「正しく」なる？

いるが、これはh1要素の大見出しはペする内容なのだと主張させる。
・続いて、中見出しのh2要素から始まる

ージ全体に影響を及ぼすものだから、ブロックと小見出しのh3要素から始ま

各div要素の中に入る要素はh1要素よ

簡単に言えば、Part 1で述べたところるブロックを、順にネストしたブロックレ

り下の階層に位置づけられるだろうという判断による。

を直せばおおむね正しくなる。div要素をベル要素として、div class=div2、div

はじめとするブロックレベル要素の階層構

class=div3とする。これは、いわばISO-・一方、div id=footer要素は div class=

造に、もっと一貫性を持たせるわけだ。そHTMLやXHTML 2.0の見出しとセクシ

div1 要素と同じ階層にある。ここはの上で、div要素やspan要素で意味づけ

ョンによる包含関係に近い形で、階層

XHTMLで言うとaddress要素のような構造を明確にしていくものだ。

ものが入るようなブロックとして用意しするという横着をせずに、可能な限り

・div class=div2要素以下は、各エントてある。このような階層のブロックは、リーが相当する。エントリーは複数ある

ページ全体に影響を及ぼす大見出しのさらに、標準のMain Indexテンプレー

ので、これらをまとめて div id=entries

ような要素の下に並ぶようなデータでトでは、たとえば XML 宣言がないだとか要素で囲むことにより、エントリー群ではなく、むしろサイト全体に一貫して挿いう、そもそもXHTMLの文法的な誤りもあることをより明確にすると良さそうだ。

入される、たとえば作者名などといったあるので、その辺りも併せて直しておくの・div id=utilities要素が内包する各要素

XHTMLで定義済みの各要素で意味づけしていけばOKだ。

データを入れるのに適している。

の具体例は、イメージ図からはひとまずが「正しい」だろう。

これが「正しい」テンプレートだ！

というわけで修正後の要素の階層構造

省略している。実際には、カレンダーやのイメージ図を用意したので、ひとまず見

月別アーカイブ一覧といった、明らかにてほしい（図4）。これは、だいたいの完成

ページの内容を構成する要素だけども、

もうウンチクはたくさん、早く「正しく」直予想図だと思ってもらいたい。

伝えたいコンテンツとしての主体ではな

した Main Indexテンプレートを見せてく

く、むしろ機能を提供しているような要れという声が聞こえる頃合だろうから、先・まず、ページ全体に影響力のあるh1要素群をdiv id=utilities要素でまとめる。

に新生 Main Indexテンプレートの全貌

素の大見出しと、それに続く内容をdiv

・div id=entries要素とdiv id=utilities要を明かす。今まで述べてきたことすべてをclass=div1要素という大きなブロックレ

素は、div class=div1要素の中で、h1

ベル要素でくくり、h1要素を大見出しと要素とまったく対等の位置づけとなって図4踏まえた結果、図5のようになった。
まず注意点だが、id属性とclass属性の新生Main Indexテンプレートの構造ツリー図

html

head
body

div class=div1

h1
p
div id=entries

背景が塗りつぶされた要
素はまとまって繰り返し登場する。

div class=div2

div class=div3

div class=div2要素とh2
要素のみ、直前のエントリ
ーが同じ日付ならばそのまとまりからは除かれる。

h3p

div id=utilities
div id=footer

新生Main Indexはこういう構造にする。100ページの構造と比べてみるとかなりシンプルになっている。

102 +++ iNTERNET magazine 2003.11 +++h2

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

値には、すべて「mt」という接頭辞を付けている。これは他のテンプレートやら既存のセレクターやらと競合してしまう可能性を排除するために、あえて付けた。たとえば、図 4で div class=div1要素を意図していたものは、この新生Main Indexテン
プレートでは「<div class= mtDiv1 >」となっている。これ以降は、この「mt」接頭辞つきの属性値で説明していく。

問題点を改めて「正しく」意味づけ
まず、全体のdiv要素の階層構造を、前に述べたように適切に直してある。
実 際 にエントリー の 内 容となる d i v
class=mtDiv3要素は、エントリー本文と投稿者や投稿した時間、エントリーに付いたコメントとトラックバックの情報も記されるところだ。ここを、エントリー本文とそれ以外というように大きく分けて、エントリー
本文のp要素群はdiv class=mtEntryBody
要 素 でくくり、それ 以 外 の 部 分 を d i v
class=mtEntryFooter要素でくくっている。
div class=mtEntryFooter要 素 の 中 は 、「何時にだれが投稿した」「コメントがいく
つ付いている」「トラックバックが何個あった」という情報が単に列挙されているものと考えて、ul／li要素で意味づけしている。
先 ほ ど 詳 細 を 省 い て い た 、d i v
id=mtUtilities要素の中身も大幅に変わった。この要素の中身は、標準の Main

図5

新生Main Indexテンプレートのコード概要<?xml version="1.0" encoding="<$MTPublishCharset$>" ?>XHTMLとして必要な定義を正しく入れる<!DOCTYPE html ……文書型宣言またはDOCTYPE宣言……><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"><head profile="http://purl.org/net/uriprofile/">head要素に必要な情報を正しく入れる……Content-Typeなどの必要なMeta要素を入れる……
<title><$MTBlogName$></title>……スタイルシートやRSSはlink要素で記述……
……JavaScriptやCCライセンスもhead要素内で……
</head><body><div class="mtDiv1">
mtDiv1：ページの根となるブロック<h1><$MTBlogName$></h1><p><$MTBlogDescription$></p><div id="mtEntries">
mtEntries：記事部分全体のブロック<MTEntries><$MTEntryTrackbackData$><MTDateHeader><div class="mtDiv2">
mtDiv2：日付ごとのかたまりのブロック<h2><$MTEntryDate format="%x"$></h2></MTDateHeader><div class="mtDiv3">
mtDiv3：各記事のブロック<h3><a name="blog<$MTEntryID pad="1"$>" id="blog<$MTEntryID pad="1"$>"><$MTEntryTitle$></a></h3><div class="mtEntryBody">
mtEntryBody：記事と記事の追記部分<$MTEntryBody$><MTEntryIfExtended>……追記部分……</MTEntryIfExtended><!--/mtEntryBody--></div><div class="mtEntryFooter">
mtEntryFooter：投稿者、コメント、
トラックバックのブロック<ul><li class="mtPosted">Posted by …… at ……</li><MTEntryIfAllowComments><li class="mtComments">……Comments ……</li></MTEntryIfAllowComments><MTEntryIfAllowPings><li class="mtTrackback">……TrackBack ……</li></MTEntryIfAllowPings></ul><!--/mtEntryFooter--></div><!--/mtDiv3--></div><MTDateFooter><!--/mtDiv2--></div></MTDateFooter></MTEntries><!--/mtEntries--></div><div id="mtUtilities">
mtUtilities：カレンダー、検索、リンクなど記事以外のページ構成要素<table …… class="mtTableCalendar">……カレンダーの内容……
<form action="<$MTCGIPath$><$MTSearchScript$>" method="get">……検索フォームの内容……
</form><dl><dt>Archives</dt><dd><ul><MTArchiveList archive_type="Monthly"><li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li></MTArchiveList></ul></dd></dl>……同様にdlとulを使って「最近のエントリー」や「リンク」を入れる……
<!--/mtUtilities--></div><!--/mtDiv1--></div><div id="mtFooter">
mtFooter：ページ全体のフッター部分<p>Powered by <a href="http://www.movabletype.org/">Movable Type <$MTVersion$></a></p><!--/mtFooter--></div></body></html>Indexテンプレートで一番困ったところとされていた、セットを想定しているとしか思

誌面の都合上すべてはお見せできないが、階層構造と論理的な意味づけを見直してXHTMLの文法を正しくした新生
Main Indexはこうなる。完全なコードについてはダウンロードした内容を確認してほしい。

え な い div class=sidetitle要 素 と div
class=side要素のまとまりだ。これらは対レイアウト情報はXHTMLから排除するであることをより明確にするために、それは br 要素で 1 行ごとに改行していくだけ

ぞれdl／dt／dd要素を用いて意味づけしのものだった。これはせっかく箇条書き直している。div class=sidetitle要素はdtの内容なのだから、、ul要素で正しく意味要素に変更され、div class=side要素だ

づけしなければならない。つまりdd要素

そして、カレンダーの部分は、col要素をったものはdd要素となった。dt要素とddの内容にul要素が入る形になる。もちろ

書き足したり、th要素のabbr属性をちゃ

要素は、dl要素によって対の関係が明示

ん、箇条書きだから、ul要素の中にli要素んと略称にしてみたりしたほか、本来はされる。

が必要な数だけ生成されるというわけだ。

CSS で定義するべきレイアウト情報をまた、div class=side要素の内容は、箇条書き的なデータが入ることが想定さ

検索フォームのところは、fieldset要素
やlegend要素を使うようにしてみた。

れているにもかかわらず、標準の状態で完全版のテンプレートをダウンロード！

XHTMLから排除している。
標準の Main Indexテンプレートでは、
カレンダー周辺は図6のように書かれていhttp://internet.impress.co.jp/im/200311mt/

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

103

図6

る。このうちレイアウト情報はどれかと言うと、div要素やth／td要素に書かれてい標準のカレンダーに使われているXHTMLコード<div align="center" class="calendar"><table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar with links toeach day's posts"><caption class="calendarhead"><$MTDate format="%B %Y"$></caption><tr><th abbr="Sunday" align="center"><span class="calendar">Sun</span></th><th abbr="Monday" align="center"><span class="calendar">Mon</span></th><th abbr="Tuesday" align="center"><span class="calendar">Tue</span></th><th abbr="Wednesday" align="center"><span class="calendar">Wed</span></th><th abbr="Thursday" align="center"><span class="calendar">Thu</span></th><th abbr="Friday" align="center"><span class="calendar">Fri</span></th><th abbr="Saturday" align="center"><span class="calendar">Sat</span></th></tr>

るalign属性、table要素に書かれているsummary 以外の各属性、td 要素の中身が空だったときに挿入されるように書かれている「&nbsp;」という値だ。
HTMLのalign属性でセンタリングしな
くても、CSSのtext-alignプロパティーや左右マージンを同じにするなどでセンタリングできる。table要素のボーダーサイズ<MTCalendar><MTCalendarWeekHeader><tr></MTCalendarWeekHeader>やセル間の幅なども、それぞれ対応する
プロパティーが CSS に用意されている。
そして、td要素の中身が空だとそのセルの周囲にボーダーが引かれないことへの対策で「&nbsp;」を値として入れておくという、何だかレガシーな技が使われているが、これはCSSのborder-collapseプロパ<td align="center"><span class="calendar"><MTCalendarIfEntries><MTEntries lastn="1"><ahref="<$MTEntryPermalink$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar></table></div>

標準のMain Indexに使われているカレンダーのコードには、文書構造だけでなくレイアウトデザインのための指示が多く入っていて、しかも無駄が多い。ダウンロードした新生Main Indexのカレンダー部分のコードと見比べてほしい。

ティーにcollapseという値を、empty-cells
プロパティーにshowという値をそれぞれ設定することで解消できるのだ。だから「&nbsp;」を入れる必要はない。
また、これだけではレイアウトのためなのか判断できないとはいえ、td 要素の中に い ち い ち 入 って い る span class=divタグのid属性とclass属性はどう使い分ける？

calendar 要素にしても、それは td要素にスタイルを付ければいいだけの話であるページ内にその属性値が一度しか出てこなからして、要するに冗長であるし意図がいいならid属性を、何度も出てくるのならclass

いかもしれない。しかし固有の名前を持ちつ

まひとつ不明瞭だ。そこで span class=

属性を使うというような説明をよく目にする

つ何らかの分類に属する要素というのはあcalendar 要素のようなものは排除してある。

しまうので、併用するという発想が出てこな

かもしれない。しかしこの説明は間違いでこりえるし、そしてそのように記述できるのだ。

そないものの、適切なものであるとは言えなさっきの例で言えば「<h1 id= MoritaYu

いだろう。

class= salaryman >森田 雄</h1>」にな

最 後 に 、div id=mtFooter要 素 には 、id属性は、その要素に固有の名前を与える

るということだ。

XHTMLのaddress要素を入れることを目ために使う。class属性は、その要素がどう

また、CSS 的な側面から言うと、id 属性やいった属性というか分類なのかというようなclass属性はセレクターとしての重要な役割

区別のために使われる。たとえば「森田 雄」

を担っている。このとき、id属性のほうがスという筆者の名前だが、これはまさにid属性

タイル適用の優先順位が高くなる特徴もあのテンプレートではないので、address要的なものだ。そして「森田る。最終的な優先順位の決定は、文脈セレ素の中身に適切な値を用意できない。別持つ筆者は、たとえば「サラリーマン」だとかクターや!importantキーワードがいろいろ絡

いうclass属性的な値を持っていたりもする

んでくると、その計算式が煩雑になってきて、のだ。この名前をh1要素にする場合があっid属性のほうが絶対的にclass属性よりも強たとしたら、前者は「<h1 id= MoritaYu >い結果になるのかと言うと、そうでもない場の外観をデザインするときは、基本的に森田 雄</h1>」となり、後者は「<h1 class=

合もあるだろう。しかし現状のブラウザーのStylesheetテンプレートだけをいじりたい

salaryman >森田 雄</h1>」というようにCSSの実装を考えれば、というよりもシェアなる。

が広いウィンドウズ版 IE 6などの実装状況論んでいたのだが、今回紹介しているこの新生Main Indexテンプレートは筆者だけに筆者の連絡先を突っ込んでおいてもいいのだが、新生Main Indexテンプレートと 思 って い る た め だ 。とりあ えず、
movabletype.orgへのリンク情報を入れる場所として使用することにしておいた。

104 +++ iNTERNET magazine 2003.11 +++雄」というidを

ちなみに、1 つの要素に対して id 属性とからすると、そもそも複雑な文脈セレクター

class属性を併用することもできる。一度なを記述したCSSを用意できないという理屈のか何度もなのかということだったら、何らもある。したがって、だいたいid属性が絡ん

かの値がそのページ内に出てくる回数によだセレクターのほうが優先順位が高いと考ってどちらの属性にするかという話になってえておいて、あまり問題はないだろう。

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

Part.3

確かな土台ができたらカッコいいデザインを描こう！

3

ウェブのプロ集団ビジネス・アーキテクツは
こうデザインした構造はできた次はデザインだ！

るという前提で進めさせてもらう。
デ ザ イン の 手 順 だ が 、少 しず つ

どうなるとかにはこだわらずにデザインしてしまおうということだ。

Stylesheetテンプレートを修正しては表示ということでデザインしてみた。今回はさあ、めでたく新生 Main Indexテンプ

して、といった感じではなく、新生 Main

2つのデザインを用意した（図 7、図 8）のレートができあがった。これで思う存分、

Indexテンプレートが生成する文書としてで、それぞれについて解説していこう。こ

デザインに取り掛かれるというわけだ。もの各要素をどのように配置していったらカこでも誌面の都合でスタイルシート本体はちろん、CSSによるデザインやレイアウト

ッコいいか、読みやすいか、そういうノリで紹介できないが、ダウンロードしたものとに慣れていないとちょっと難しいと思うか

やっていくといいだろう。コンテンツの構比べながら読み進めてほしい。

もしれないが、ここではある程度慣れてい成要素を取り出して、それらを肴に、MTで図7オリジナルデザイン1

図8

新生Main Indexに合わせてオリジナルのスタイルシートを作った。空をイメージしたページ
デザインだ。必要な情報は失われていないのがわかるだろう。各エントリーの横にある投稿者／コメント数／トラックバック数のアイコンやページ最下部などにうまく画像が使われているのがポイントとなっている。

完全版のテンプレートをダウンロード！

オリジナルデザイン2

もう1種類スタイルシートを作ってみた。引き締まったイメージのページデザインだ。こちらはテンプレートもさらに少し変更してあるのでダウンロードして確認してほしい。一番特徴的なのはカレンダー部分だろう。

http://internet.impress.co.jp/im/200311mt/

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

オリジナルスタイルシート①〜Sky：空〜

right:auto;

div class=mtEntryBodyにfloatプロパテ

bottom:auto;

ィーを用いて、div class=mtEntryFooter

left:20px;

要素を回り込ませている。ちなみに回り

width:168px;

込ませっ放しだと、後に続くエントリーがたら実現できるのだろう。コンテンツの構

padding-top:90px;

困ってしまうので、h2要素や h3要素で成要素が、それぞれブロックレベル要素を

background:transparent

clearしておくのを忘れてはいけない。

図 7 のページはどういった CSSを書いともなってどのように配置されているのか

url( ptn1utilbg.gif ) topを考えてみよう
（図9）。

left no-repeat;

あたかもブロックレベル要素にボーダ

div.mtDiv3 div.mtEntryBody}

ーを付けて表示させているかのようなこの{状態を見ればもうピンと来たかと思うが、

padding-right:5px;

ようするにこういう配置になるようなスタ段組みにされたそれぞれのカラムの中

イル定義をがんばって創ればいいというこ

は、おおむね上から下へと積み重ねられpadding-bottom:20px;となのだ。

るレイアウトになっているので、マージン

width:330px;

margin-left:3px;

やパティングなどをきっちり寸法を測ってテンプレートデザインのポイント設定していけば、ほとんど問題なく配置でfloat:left;}

きるだろう。
問 題 が あ ると す れ ば 、や はり d i v

レイアウト的に注目するのは、まず divclass=mtEntryBody の右に div

id=mtEntries要素と div id=mtUtilities要class=mtEntryFooterを段組み的に配置

素とで段組みにされているところだろう。

しているところだろうか。こちらは今度は構造とデザインの完全な分離
このデザインを実装する場合のポイン

段組みにはいくつかの手法があるが、今回は positionプロパティーによる絶対配置を採用した。絶対配置にしないほうの

図9

オリジナルデザイン1の出力と構造の関係

ブロックの縦サイズが絶対配置にしてい画像るブロックの縦サイズより長くなる必要が

div class=mtDiv1

画像あるという前提条件が付くが、ブラウザー

h1
P間での実装上の挙動が比較的一致していdiv class=mtDiv2
ul／li

ージンを大げさに付けることで、左側に空白地帯を設ける。そしてその空白地帯の上に重ねるように、div id=mtUtilities要

h2
h3

table

る手法だ。div id=mtEntries要素の左マ
div id=mtUtilities

form

画像

div class=mtDiv3
dl／dt／dddl／dt／dd

素を絶対配置にするわけだ。これで、見た

div class=mtEntryBody

div id=links

dl／dt／dd

目は段組みにされているようになる。

div#mtEntries {margin-left:200px;

div id=mtEntries

margin-right:18px;
padding-top:1px;
backgroundcolor:#F0F0F0}
div#mtUtilities {画像

position:absolute;
top:81px;

106 +++ iNTERNET magazine 2003.11 +++全体としてシンプルなドキュメント構造ながらも、含まれる内容は標準のものと変わらない。

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

div id=mtFooter

トは以上だ。基本的なCSSデザインがわ
かっていれば、ポイントになってくるところ
なんてだいたいこれくらいなのだ。特に新ブラウザーによって表示が変わるのはどうする？

生 Main Indexテンプレートが生成する
ブラウザーのCSS実装に問題があって特定

こういった、全体的に実装がボロボロだかのプロパティーを解釈できないためにCSS

らCSSを無効にさせたいという場合の対策

での表現が限られてくる、ということが往々はまだ楽なのだが、特定のブラウザーに特にしてある。解釈できないプロパティーを無定のプロパティーだけどうしても読み込ませえをただひたすら付けていくだけという、か視してくれるのであればまだいいのだが、がたくないとかいうことが発生することがある。

なり双方を分離した作業になる。さらには、

んばって解釈しようとしてめちゃくちゃな表示

こういうときは、そのブラウザーが未実装な結果を出してしまうということが多々ある。そCSSの文法を織り交ぜて読ませなくするだ

れは要するに、ブラウザーがバグっているのとか、やはりバグを利用してその部分を無視

XHTMLなら、さらに簡単だろう。XHTML
側は完全に見栄えにこだわらずに構造のみを定義しており、CSS側は構造に見栄MTにこだわらない既存の他のウェブペー
ジ（MTが生成したわけではないページ）
で

だが……。

させるだとかいったやり方で対応する。

使用しているCSSを、ほぼそのままに流用

最新版でない古めのブラウザーでCSSに対個人的な経験則だが、CSSのコメントの終することもできると思われる。

応してしまっているものは、だいたいCSS実

了印（*/）の前に半角円マーク
（¥）
を入れると

装がかなりヤバイ感じだ。それらに対しては、コメントが終わっていないとマックOS 版 IE

可能ならCSSそのものを読み込ませないよ

5が勘違いするエスケープ技は、かなりよくうな細工をするのが楽だ。たとえばネットス使うので紹介しておこう。たとえば letter-

ケープ4.xであれば、link要素のmedia属性

spacingプロパティーに正の数値を設定してにscreen以外の値を設定しておけば、そこいると、マックOS版のIE 5はその分をボッで指定しているCSSファイルを読み込まなクス幅の計算からなぜか除外するために、くなる。

ボックスに設定したwidthを越えて中身の文

オリジナルスタイルシート②〜SPACE：宇宙〜
もう1つの違うデザインのもの（図8）には、前のデザインと比べて、とても大きな違いがある。そう、カレンダーが表ではな

章がはみ出してしまうことがある。だから筆rel= stylesheet

者は、letter-spacingプロパティーを使うとく縦列になっているのだ。もうこの時点で、

type= text/css

きは、そこだけを絶対にマックOS版のIE 5

さっきの新生 Main Indexテンプレートそsrc= styles-site.css<link

media= screen,tvに読み込ませなくしている。

/>のままでは、こちらのデザインを実現する<!--ネットスケープ4.xはこのファイルを/* MacIE5はここから ¥*/ことができない。このように、カレンダー

読めない-->

letter-spacing:5px;/* ここまでをコメントだと勘違いする */をtable要素で意味づけしないようなパターンも十分にありえるので、こちらのバー
ジョンの新生Main Indexテンプレートも別途用意しておいた。基本的な構造の階

テンプレートデザインのポイント

層などは変わらないのだが、いくつか多少用意してある。この div id=mtCalendar

異なる構造が含まれる。どちらの構造が要素には、カレンダーのul／li要素だけで妥当かという比較は困難で、いうなればどなく、月別アーカイブ一覧のdl要素も含む

ちらも正しいと考えられるものだ。こちら

ように、構造を変更している。このデザイ

さて、こちらのデザインについても、の新生 Main Indexテンプレートの内容

ンでは、時系列的な意味合いをもつ構成

CSSをどう書いたらいいかのポイントをいは、ダウンロードしてじっくり見てほしい。

要素を1つの段組みカラムに配置するよ

くつかピックアップしていこう。まずは先うになっているが、これはカレンダーと月別

ほどと同様に、ブロックレベル要素がどのアーカイブ一覧のまとまりを強く関連づけ

配置に対応しているのかを表した図10をる設計をしているためだ。それを意味づけ見てほしい。

1つ目のテンプレートとの違い
1つ目の新生 Main Indexテンプレートと大きく違うのは、まず前述のとおりカレに反映して、このような構造に作り変えたというわけだ。

一番困りそうなのはやはり段組みだろうか。こちらも芸がないようだが position:

ンダー自体の意味づけがul／li要素にな

また 、div class=mtEntryFooter要 素

absoluteを使って絶対配置にして解決しっていることだが、このカレンダーを内包の中も、単なる箇条書きの内容とはせずてみた。div id=mtUtilities要素とdiv id=

す る ブ ロ ッ ク レ ベ ル 要 素 が 、d i vに、「投稿したのは：だれ、投稿した時間

mtCalendar要素をそれぞれ絶対配置にし

id=mtUtilities要素ではなくなっているといは：何時」という表現で構成要素を組み替て、div id=mtEntries要素は左マージン

う点も挙げられる。div id=mtEntries要

えたこのデザイン意図に基づいて、dl要素

を大きく空けるという感じだ。

素と div id=mtUtilities要素、この 2つとで意味づけされるように書き換えてある。

のグレーの背景が敷かれているのだが、同等の階層にdiv id=mtCalendar要素を完全版のテンプレートをダウンロード！

ただ、この3段カラムにはどれも半透明

http://internet.impress.co.jp/im/200311mt/

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

107

図10

オリジナルデザイン2の出力と構造の関係

この背景は一番縦に長いブロックの長さ画像まで追従したものになっている。通常、絶div class=mtDiv1対配置とかフロートさせた要素の背景を、画像させていない要素の縦の長さまで追従させることはできない。だから、見かけ上は追従しているかに見えるようにしてみたの

h2
h3

dl／dt／dd

だ。div id=mtEntries要素の背景が、も

dl／
dt／
dd

dl／dt／ddともと3段カラムの段組みの背景になって

div class=mtDiv3

form

いるわけだ。この場合、div id=mtEntries
要素の左側を空けるためにマージンを設

div class=mtEntryBody

定してしまうと、背景の左上開始地点がそのマージンをとった後からになってしまう

div class=mtDiv2

div id=mtUtilitiesul／li

div class=mtFooter

ので、マージンではなくパディングで左側を空ける必要が出てくる。
div id=mtEntries

div#mtEntries {padding-left:294px;

dl／
dt／
dd

background:transparenturl( ptn2h2bg.gif ) top

div id=mtCalendar

left repeat-y;}
div#mtCalendar {position:absolute;

div id=mtFooter

top:270px;
left:198px;

こちらもドキュメント構造はシンプルだ。カレンダーに表を使っていない分だけコードもシンプルになっている。

width:80px;}
div#mtUtilities {position:absolute;
top:270px;
left:20px;
width:168px;}

Transitionalとして妥当なXHTMLを生成する。さらに言えば、XHTML 1.0 Strict

よくあるblockquoteの文法間違いとしても妥当な内容になっているので、少し手を入れれば XHTML 1.1としても妥

よく見受けるのが、引用文をblockquote

当な内容に書き換えることができる。話

要素で意味づけしているときの誤りだ。引

が最初に戻ってしまうが、MT はコンテン用のために使うブックマークレットが、誤っツ管理システムなので、XHTMLの文法なた文法を助長させるようなblockquote要

その他の要素配置や表示のスタイルにどを気にせずに、おもしろおかしいエント素の塊を吐き出したりしているのだろう。

関しては、基本的なところは1つ前のCSSリーなどを登録していくことで、魅力的な標準の CMS.pmファイルではそのようなとおおむね変わりないので、ひたすら書い

ウェブログサイトが作れることだろう。しかことは発生しないが、引用文を挿入しやすていけば完成するかと思われる。

し、エントリーの内容に、採用しているくするために、CMS.pmファイルの該当箇

XHTMLのバージョンに見合わない文法で所の出力内容をblockquote要素を伴うも書いたXHTMLを含めてしまうと、そのペのに変更する方法が、インターネットで公正しいXHTMLがMTの世界を広げる
今回作り直した2つの新生Main Index

ージは妥当なXHTML文書ではなくなって開されている。しかし、それが誤った文法しまう。そういう意味では、やはりある程の blockquote 要素を伴っているのだ。

度、XHTMLの仕様にも通じてないとよろblockquote要素の直下に、テキストやイしくないと言える。

ンライン要素を書くことはできない。p要
素やdiv要素などのブロックレベル要素をテンプレートは 、どちらも XHTML 1.0

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

書いて初めてテキストやインライン要素がいるわけだ。最初からp 要素が生成されだ。文書構造の定義と見栄えの定義とを書けるようになるのだ。この誤った文法のてしまうと、p 要素にはブロックレベル要

しっかり切り分けることで、XHTMLペー

blockquote要素をそもそも生成させない素を含めることができないため、たとえば

ジは純粋に情報そのものを取り扱えるよ

ように、その変更済みのCMS.pmファイ

箇条書き（ul要素）などを引用できなくなっうになる。これにより、ブラウザー以外のルをさらに変更しておくといいだろう。標てしまうからだ。

さまざまなアプリケーションからの利用も準 で「 sprintf qq(<a title= %s

容易になり、世界がさらに広がるだろう。

href=%s >%s</a>¥n¥n%s)」となっていた部◇◇◇

MT、XHTML、CSS をさらに知るための情報

分を、たとえば次のように書き直す（改行
これまでに解説してきたように、テンプ

せずに1行で書く）。

レートが生成するXHTML自体を「正しい」・『Movable Typeで今すぐできるウェブログ

ものにしていけば、あとは自由自在なCSS

入門』

sprintf

デザインができるようになる。ここではqq(<blockquote><p><cite><aMain Indexテンプレートしか取り上げな

240ページ／本体1,800円＋税

title= %s

かったので、実際にはまだまだやることが・『CSS 2 スタイルシート大辞典』

href= %s>%s</a></cite></p><div>%s</

盛りだくさんなわけだが、すべてのテンプ

div></blockquote>)

レートを一貫した構造で意味づけするのを

インプレス刊／ISBN4-8443-1812-8

インプレス刊／ISBN4-8443-1740-7
496ページ／本体1,980円＋税
・「 XHTMLの 書 き 方と 留 意 点 」（ The Web

忘れてはいけない。Stylesheetテンプレ

KANZAKI）

ートの定義内容をテンプレートごとにどん「%s」はそれぞれ前からリンクする対象

http://www.kanzaki.com/docs/html/
xhtml1.html

どん増やしていくのではなく、MTが備えるのページのタイトル、リンクのURL、引用

各ページ全体を通して同じスタイルを適用する内容に置き換えられるもので、この例するようなやり方が可能になるわけだ。つでは最後の「%s」
をdiv要素でくくるようにまり、まずは、とにかくStylesheetテンプ

している。引用したのが単純な文章ならレート以外のテンプレートを正しく書き直ば、このdiv要素はp要素に書き直して意すということが肝心だといえるだろう。

・XHTMLの参考日本語訳（どら猫本舗）
http://www.doraneko.org/xml/
xhtml10/REC000126.html
・HTML 4.01の参考日本語訳（HTML 4仕様
書邦訳計画補完委員会）
http://www.asahi-net.or.jp/˜sd5a-ucd/
rec-html401j/cover.html

味づけを明確にしたほうがいいだろう。しRSSやトラックバックなどのXML技術を・CSS 2の参考日本語訳（Y-ADAGIO）

かし必ずしも引用の内容が単純な文章だ

うまく使ってこそウェブログだと言われる。

http://www.y-adagio.com/public/とは限らないので、あえて div 要素にしてせっかくXHTMLで作ってある出力ページ

standards/tr̲css2/toc.html

スクリプトをXHTMLファイルに直接書くのはOK？
HTML 4ま で は script要 素 の 内 容 は<script type="text/javascript">

ただ、MT標準の Main Indexテンプレート「CDATA」であるとされたが、XHTML では<![CDATA[

でも、新生 Main Indexテンプレートでも、「#PCDATA」として扱われる。CDATAと(スクリプトの内容)

スクリプトをscript要素内に直接書いている。

#PCDATAはどちらもテキスト情報だが、ブ]]>これはたまたま書けたからそうしているのだ。

ラウザーやパーサーがそのテキストが書か</script>「<」「>」「&」などのような、HTML／XHTML

れたとおりに 解 釈 するの が C D A T A で、で特別な文字とされるものが含まれている

HTML／XHTMLとして扱える部分はそう解

しかし、このCDATAマーク区間に対応して場合に、#PCDATAだと意図したものと違う釈されるのが#PCDATAだ。

いるブラウザーはまだ少ないため、スクリプ動作になるということなのだから、それらを含

たとえば「<」「>」「&」は、CDATAでは文字トを外部ファイルにしてしまうのがいいだろ

まないスクリプトであればそのまま書いてもでしかないが、#PCDATAの場合はHTML／う。これならば、要素内容をCDATAで扱お問題ないとも言える（もちろんコメント扱いに

XHTMLで特別な意味のある文字として扱わ

うが#PCDATAで扱おうが関係ないというならないように、「 <!-- -->」は 使っていなれる。#PCDATA領域内に「<!-- -->」があことになり、万事解決となる。

い）。だが、たまたまうまくいく場合だけだとると、そこはコメント扱いになるわけだ。そこいうのを忘れてはいけない。基本的には、スで本来ならばCDATAとして扱わせるために<script type="text/javascript"

クリプトは外部ファイルを用意してそこに入は、CDATAマーク区間を明示する。

src="script.js"></script>

れるものだと考えておけば間違いない。

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

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この 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.