« タグクラウドのマークアップ | トップページ | 新モーツァルト全集PDF公開 »

2006-12-14

CMS の見出しレベルに悩む

(追記: タイトルをより内容に合うように変更しました。本文も若干修正しましたが、内容に関わる変更はありません。)

見出し要素の現在と未来 最近、CSS よりも、関心が XHTML に傾きがちな管理人です。(^ ^;) 今日は、目下、裏でせっせと制作中の MovableType サイトのコーディングからのネタです。

このココログもそうですけど、ブログツールを含む何らかの CMS を使っていると、「幾つめの見出しレベルからスタートしたらいいんだ?」、「別のサービスから引っ越したら、見出しレベルが1つズレちゃった」、「文書構造をカスタマイズしたので、これまでの見出し要素のレベルを調整しないといけないよな..」。そんなことで困った経験とか、過去にありませんか?

見出しマークアップのガイドライン(制作中の MT サイト用)

CMS 固有の悩み

実は見出し要素(h1, h2, h3...)のマークアップって、CMS を使っていると、思いのほか厄介だったりします。どう厄介かというと、普段編集するエントリーで使う見出しレベルが、どのレベルから始まるのかを覚えておかなくちゃいけなかったり(通常は h3 か h4 あたり)、テンプレートの中身をカスタマイズして内部構造を変えちゃうと、これまで書いたエントリーの見出しレベルが、おかしくなってしまったりする辺りとか。

XHTML 2.0 では h 要素が新設

XHTML 2.0 の世界ではこういった悩みは消滅する見込みです。すでに広く知られていることですが、目下策定中の XHTML 2.0 では、h 要素section 要素が新設されます。これで論理的には、h 要素が置かれている section の階層の深さで、見出しのレベルを表現できるようになります。だから、わざわざ h1, h2... とレベルを明示的に記述しなくても良くなるわけですね。階層の深さに関係なく、h 要素のままでマークアップすれば良いのですから。こうなれば、確かにありがたいです。

<section>
<h>大見出し</h>
<section>
<h>小見出し</h>
<p>ここで段落の登場です。</p>
<h>小見出し</h>
<p>また段落の登場です。</p>
<h>小見出し</h>
<p>またまた段落の登場です。</p>
</section>
<h>大見出し</h>
<p>ここも段落です。</p>
</section>
XHTML 1.n 段階での対策

とはいえ、目下、XHTML 1.n 世代にいる我々は、次世代に備えて代替手段を講じるほかありません。

唯一の完璧な解答...というわけではありませんが、もっとも XHTML 2.0 にスムーズに移行しやすく、論理的にも妥当なマークアップのひとつは、全てのセクション(ないしサブセクション)を、それぞれ <div class="section"> で括り、それらの子孫セクション(サブセクション)は入れ子にします。こうしておけば、XHTML 2.0 が利用できるようになった段階(もしくは普及した段階)で、XSLT か何かで <div class="section"><section> に、<h1><h6><h> に一括変換できます。

<div class="section">
<h2>大見出し</h2>
<div class="section">
<h3>小見出し</h3>
<p>ここで段落の登場です。</p>
<h3>小見出し</h3>
<p>また段落の登場です。</p>
<h3>小見出し</h3>
<p>またまた段落の登場です。</p>
</div>
<h2>大見出し</h2>
<p>ここも段落です。</p>
</div>
MovableType で見出し要素を自動管理するプラグイン

似たようなことを考える人はやはりいるもので、MovableType 用の良いプラグインがありました。

一度、テンプレート側で、

<$MTEntryBody convert_hn_lv="+2"$>

のように指定しておけば、あとはエントリー編集画面の方では、h1 から見出しを書き始めてOKです!後日、MovableType のテンプレートで階層を変更しても、同時に convert_hn_lv="+2" の部分をそれに合わせて調整すれば良いだけなので、いちいち個々のエントリーの見出しを調整する手間が省けます。これはとてもとても感動的なプラグインですね。

[おまけ]CSS 2 の自動連番(counter)機能をつけてみる

:before 擬似要素も使うので、基本的に IE では無効になってしまいますが、CSS 2 に完全対応しているブラウザなら、counter プロパティを利用すれば、見出しの先頭に、CSS で見出し番号を自動的に振ることができます。

ちょっと、このエントリー限定で、試しに CSS の見出し番号をつけてみましたので、ご参考までに。(h4 を "sec.1"、h5 を "1-2" のようにしてみました。)ただし、Firefox 1.5+(および同等の Gecko ブラウザ), Opera 8?+ 限定です。Safari もどうやら未実装のようです。

/* カウンターの値の追加と初期化設定 */
.section h4 {
counter-reset: h5 h6; /* 名前は h3, h4...でなくとも、level1, level2 や section, subsection とかでも良い */
counter-increment: h4;
}
.section h5 {
counter-reset: h6;
counter-increment: h5;
}
.section h6 {
counter-increment: h6;
}

/* カウンターの表示(IE, Safari は未対応)*/
.section h4:before {
content: "sec." counter(h4);
margin-right: 0.5em;
}
.section .section h5:before {
content: counter(h4) "-" counter(h5);
margin-right: 0.5em;
}
.section .section .section h6:before {
content: counter(h4) "-" counter(h5) "-" counter(h6);
margin-right: 0.5em;
}

|

« タグクラウドのマークアップ | トップページ | 新モーツァルト全集PDF公開 »

[Web]XHTML」カテゴリの記事

[Web]その他」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/4538696

この記事へのトラックバック一覧です: CMS の見出しレベルに悩む:

« タグクラウドのマークアップ | トップページ | 新モーツァルト全集PDF公開 »