順序が大事なのでol，liでいきたい

dl，dt，ddでマークアップする選択肢も考えました。

<dl>
  <dt>1. 手順1</dt>
  <dd>手順1についてちょっとした説明。</dd>
  <dt>2. 手順2</dt>
  <dd>手順2についてちょっとした説明。</dd>
  <dt>3. 手順3</dt>
  <dd>手順3についてちょっとした説明。</dd>
  <dt>4. 手順4</dt>
  <dd>手順4についてちょっとした説明。</dd>
</dl>

dtの最初に1. 2. 3. 4.とテキストで書き入れるのはちょっと気持ち悪いですね。IE6, 7, Safariなどは未対応ですが，

<dl>
  <dt>手順1</dt>
  <dd>手順1についてちょっとした説明。</dd>
  <dt>手順2</dt>
  <dd>手順2についてちょっとした説明。</dd>
  ......
</dl>

dl dt {
  counter-increment: flow;
}

dl dt:before {
  content: counter(flow) ". ";
}

という方法で，dt要素の頭に番号を入れていくことはできます。

でも，dlだと「順序が大事」ということがいまひとつ伝わりにくいのと，一部のブラウザで自動的に番号を入れられないという理由で，最終的にはこんなふうにマークアップしてみました。

<ol>
  <li>
    <dl>
      <dt>手順1</dt>
      <dd>手順1についてちょっとした説明。</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>手順2</dt>
      <dd>手順2についてちょっとした説明。</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>手順3</dt>
      <dd>手順3についてちょっとした説明。</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>手順4</dt>
      <dd>手順4についてちょっとした説明。</dd>
    </dl>
  </li>
</ol>

li要素にdl要素を入れたときの問題

EI6, 7では，リストマークの後が空行になってしまいます。また，最初のリストマークが表示されません。

このズレを解消するよい方法が見つからなくて，今までliにdlを入れるのはためらっていました。

しかし，案外あっけない解決方法を見つけたので，これからはどんどん使うつもりです。

/* for IE6 */
* html ol li dl {
  display: inline;
}

/* for IE7 */
*:first-child+html ol li dl {
  display: inline;
}

2つのセレクタをグループ化して書くと，IE6用のhackが効かなくなってしまいます。別々に書かなければならないようです。

XHTML2.0のdiという要素

そんなとき，目にしたエントリがこれです。

でも、個人的にはどうしても複数ある同義語と、多義語の説明文をグループ化するための中間的な要素が欲しい気がします。DOM で処理するにせよ CSS をあてるにせよ、実装が中途半端だと、エラーの原因にもなりますし、なにより構造化文書的に、このフラットさは気持ち悪くないですか？(^o^;)

• 我的春秋 : 定義リストの違和感

• XHTML 2.0 - XHTML List Module

XHTML2.0で提案されているdiという要素は，dtとddのセットを明確にしてくれそうです。

<dl>
  <di>
    <dt>手順1</dt>
    <dd>手順1についてちょっとした説明。</dd>
  </di>
  <di>
    <dt>手順2</dt>
    <dd>手順2についてちょっとした説明。</dd>
  </di>
  <di>
    <dt>手順3</dt>
    <dd>手順3についてちょっとした説明。</dd>
  </di>
  <di>
    <dt>手順4</dt>
    <dd>手順4についてちょっとした説明。</dd>
  </di>
</dl>

おまけにlist-styleプロパティをあてることができたら，かなりスッキリしそうです。

dl di {
  list-style: decimal;
}