国民宿舎はらぺこ 大浴場

• CSSとprototype.jsで「ぶら下げ」レイアウトをやってみた (webデザイナーのナナメガキ さま)

リンク先がお役立ち情報であるのに対してこっちは単なるぼやきなのですが。。。(^_^;

注釈リストを記述する方法がいくつか紹介されているのですが、セマンティクスな HTML を、と考えると、やっぱり注釈リストもリストである以上リストタグを用いて表現すべきだと思うのですよ。

でもこれが、なかなかうまくキマらない。CSS2 を用いればそれなりに表現することはできるんだけど、

body {
    counter-reset:      note-enum;
}
ul.note li:before {
    content:            "※";
}
ol.note li:before {
    content:            "※" counter(note-enum) ". ";
    counter-increment:  note-enum;
}
ul.note li, ol.note li {
    list-style-type:    none;
}
ul.note li {
    padding-left:       1em;
    text-indent:        -1em;
}
ol.note li {
    padding-left:       2em;
    text-indent:        -2em;
}

表示サンプルとしてはこんな感じになるわけですが。。。すべて単純な <ul class="note"> <li> ～ </li> ... </ul> または <ol class="note"> <li> ～ </li> ... </ol> で書けていて、「※」だの「※1.」だのは CSS が勝手に表示してくれている (すなわち、あくまで「見た目の要素」として切り分けができている) という点では優れているのですが、番号付きな方は番号が 2桁以上になると微妙に表示が崩れちゃう点とか、更に重大なことには IE では (IE7 であっても!!) content: やら :before やらが動作してくれない為にうまく表示してくれなかったりして (だから IE ユーザーさんはサンプルを見ても「なんのこっちゃ?」となったんではないかと思われ)、現時点では実用的ではなかったりするという欠点があるのよね。

リストなんだからリストとして書けるべきなのになぁ～。

ちなみに番号つきの注釈で統一するんであれば、参照元リンクと一緒に以下のようにスタイル定義するとより実用的かも。

body {
    counter-reset:      note-enum ref-enum;
}
ol.note li:before {
    content:            "※" counter(note-enum) ". ";
    counter-increment:  note-enum;
}
ol.note li {
    list-style-type:    none;
    padding-left:       2em;
    text-indent:        -2em;
}
a.ref:after {
    vertical-align:     super;
    font-size:          60%;
    content:            "※" counter(ref-enum);
    counter-increment:  ref-enum;
}

サンプルとしてはこんな感じ。ひでー文章だなぁとかいう突っ込みは却下ｗ。ちなみにさっきのもこれも Gecko (Mozilla、Firefox、Camino 等) や Opera であれば期待通りに表示されます (Konqueror、Safari でもいけるはず…)。IE だけ NG。

ちなみに、CSS3 の ::marker が使えるようになると、以下のようにスタイルを記述できるようになるみたいです (間違ってたらごめんちゃい…誰かご指摘ぷりーず)。

body {
    counter-reset:      note-enum;
}
ul.note li:marker {
    content:            "※";
    width:              1em;
}
ol.note li:marker {
    content:            "※" counter(note-enum) ". ";
    width:              3em;
}
ol.note li {
    display:            list-item;
    counter-increment:  note-enum;
}

但しこちらはリリースされている (開発中とかではない) 主要ブラウザで表示できるブラウザは未だ存在しないっぽいです (いちおーサンプルは用意しておきますた)。こちらの記法であれば、「※」や「※1.」はマーキーとして定義でき、しかもマーキーの幅も定義できる (マーキーのために幅を確保できる) ので、番号付き注釈で番号が 2桁になっても表示がうまいこと揃ってくれる、なんて表示が期待できるようになる、んではないかと思います (自信ないけど ^_^;)。

HTML のセマンティクスを守って記述する自由が得られる日は、まだまだ遠い。。。(*sigh*)