今回はリスト内の項目として
さらにリストを入れ込みたい
というときの方法です。

たとえば
目次などのなかで
大見出しのなかに
小見出しをつくりたい
といった場合に便利です。

基本的な方法を紹介します。

CSS_カスタマイズ

Contents

  1. ふつうに<ol>タグのなかに<ol>タグを入れるとどうなるか？
  2. 変更の手順は？
  3. まずはHTMLを変更
  4. CSSでクラスにスタイルを追加する

1.ふつうに<ol>タグのなかに<ol>タグを入れるとどうなるか？

リスト形式で表示させ
各項目に番号をつけてあらわすには
<ol>タグをつかいます。

「小見出しをつけたい」
という場合には
<ol>タグのなかに
<ol>タグを入れ子構造にするわけですが
ふつうに入れ子にすると
大見出しと小見出しの
項目番号が同じ表示になってしまいます。

こんな感じです。

  1. 《大見出し1》　　
    1. （小見出し1）
    2. （小見出し2）
    3. （小見出し3)
  2. 《大見出し2》 　　
    1. （小見出し1）
    2. （小見出し2）
    3. （小見出し3)
  3. 《大見出し3》
まあ、
わからなくはないですが
読みづらいですよね。

この小見出しの番号を
(1)(2)(3)…とか
(a)(b)(c)…とかにしたいな
っていうお話です。

2.変更の手順は？

変更の手順としては
  1. 小見出しとして入れ子にする<ol>タグにclassを指定する
  2. そのclassのデザインをCSSを変更して新しく定義する
というながれになります。

3.まずはHTMLを変更

まず入れ子にする
<ol>タグにclassを指定します。

classの名前はなんでもかまいません。

ここでは小見出しとなるclassを
"contents-insert" と指定します。

HTML


<ol>
   <li>《大見出し1》
   <ol  class="contents-insert">
      <li>（小見出し1）</li>
      <li>（小見出し2）</li>
      <li>（小見出し3）</li>
   </ol></li>
   <li>《大見出し2》
   <ol  class="contents-insert">
      <li>（小見出し1）</li>
      <li>（小見出し2）</li>
      <li>（小見出し3）</li>
   </ol></li>
   <li>《大見出し3》</li>
</ol>


これで入れ子部分に
新しくclassが指定できました。

<ここで大見出し用の
<li>タグは

<ol>　
<li>《大見出し1》</li>
　　　<ol  class="contents-insert">
　　　<li>（小見出し1）</li>
　　　<li>（小見出し2）</li>
　　　<li>（小見出し3）</li>
　　　</ol>


ではなく

<ol>
<li>《大見出し1》
　　　<ol  class="contents-insert">　　
　　　<li>（小見出し1）</li>
　　　<li>（小見出し2）</li>
　　　<li>（小見出し3）</li>
　　　</ol></li>　

のようになるので注意が必要です。

4.CSSでクラスにスタイルを追加する

つぎは新しく指定したクラスの
スタイルを追加します。

CSS


.contents-insert{
     padding: 0 0 0 2em;
     margin: 0;
}

.contents-insert  li{
     list-style-type: none;
     list-style-position: inside;
     counter-increment: num;
}

.contents-insert li:before{
     display: marker;
     content: "(" counter(num) ")";
}


  • margin: 要素の外の余白です。ここでは上下左右とも0の設定なので、"contents-insert"はページ幅いっぱいに広がり、上下の要素との間の余白も0です。
  • padding: 要素の中身が入る枠と実際の要素の中身との間の余白です。上、右、下は0なので余白なし、左側は2文字分の余白をつけインデントしています。
  • list-style-type: リストの前に表示するマーカーを指定します。ここでは"none"として表示させない設定です。
  • list-style-position: リストのマーカーの位置を指定します。"inside" でマーカーをリストの各項目内に表示します。
  • counter-increment: カウンターの増え方を指定します。ここでは"num"というカウンターをつくり1ずつ増えていく設定です。数字を指定しなければ1ずつ増えていきます。
  • :before:   要素の前に擬似要素をつくります。リストマーカーを非表示にしたのでここではリスト要素の前に擬似要素をつくり新しいマーカーを指定します。
  • display: 要素の表示を指定します。"marker" でリストマーカーを表示するためのマーカーボックスをつくります。
  • content: 要素の中身を置き換えます。ここでは  "(numで指定したカウンター)" という表示になるよう指定しています。

これを表示すると


  1. 《大見出し1》
    1. （小見出し1）
    2. （小見出し2）
    3. （小見出し3）
  2. 《大見出し2》
    1. （小見出し1）
    2. （小見出し2）
    3. （小見出し3）
  3. 《大見出し3》


となります。

ひとつずつ理解していけば
それほど難しくはないとおまいます。