オトコのキモチ３

「覚えておくとちょっと便利なHTML要素」の第５弾。li要素の中にはブロック要素が入れられます。リストの入れ子をいくつか紹介。

li要素の中にはブロック要素が入れられる。

<ul>
  <li>MacBook ファミリー
    <ul>
      <li>MacBook</li>
      <li>MacBook Pro</li>
    </ul>
  </li>
  <li>Mac デスクトップ
    <ul>
      <li>Mac mini</li>
      <li>iMac</li>
      <li>Mac Pro</li>
    </ul>
  </li>
  <li>iPod
    <ul>
      <li>iPod Shuffle</li>
      <li>iPod nano</li>
      <li>iPod</li>
    </ul>
  </li>
</ul>

li要素にul要素を入れたパターン。
ブログじゃあんまり使わないけれど，メニューの階層を正確に表すときには便利だ。
上のものを <div id="menu">でくくってあれば，こんなこともできる。

#menu {
  width:16em;
}
#menu ul {
  margin:0;
  padding:0;
  background:#F9F0E7;
  border:solid #CCC;
  border-width:1px 1px 0 1px;
}
#menu ul li {
  margin:0;
  padding-left:6px;
  list-style:none;
  border-bottom:solid 1px #CCC;
}
#menu ul li ul{
  border:none;
}
#menu ul li ul li {
  margin-left:12px;
  background:#FFF;
  border:solid #CCC;
  border-width:1px 0 0 1px;
}

li要素にdl要素を入れたパターン。

<ol>
   <li>
     <dl>
       <dt>相手の意見に耳を傾ける暇がない。</dt>
       <dd>RSSとはてブをチェック中。マウスくりくりしながら聞いてる。</dd>
     </dl>
   </li>
   <li>
     <dl>
       <dt>素直な気持ちをストレートに伝えるのは気恥ずかしい。</dt>
       <dd>惚れてる弱みを見せたら負け，みたいなヘンな意地を張っている。</dd>
     </dl>
   </li>
   <li>
     <dl>
       <dt>熱意のある言葉（行動）は空振りに終わる。</dt>
       <dd>熱くなっていただけに，後があまりにも虚しい…。</dd>
     </dl>
   </li>
</ol>

といったこともできる。

• 参考：*LOVE IS DESIGN* - 気持ちを伝える3つのヒント

が，IE には，リストマーク（記号や番号）が上にずれるのと，最初のリストマークが消えるというバグがある。

• 参考：CSSバグリスト＠CSSバグ辞典スレッド - Internet Explorer (Windows) CSSバグリスト - li要素の子孫にリスト要素があるとリストマークが上方にずれる

<ol>
   <li>
     <div>
       <dl>
         <dt>相手の意見に耳を傾ける暇がない。</dt>
         <dd>RSSとはてブをチェック中。マウスくりくりしながら聞いてる。</dd>
       </dl>
     </div>
  </li>

<ol>
    <li><!-- IEのばっかあん -->
      <dl>
        <dt>相手の意見に耳を傾ける暇がない。</dt>
        <dd>RSSとはてブをチェック中。マウスくりくりしながら聞いてる。</dd>
      </dl>
    </li>

などとすることで，最初のリストマークが消えるバグは回避できる。（ご存じとは思うが「IEのばっかあん」は他の台詞でもＯＫ）

このパターンで書いた記事

彼氏を出世させたかったら「はてな」を使え

関連するエントリ

ちょっとHTML(4) - なぜリストを使うのか

ちょっとHTML/ちょっとCSS - INDEX