• いっしょう
  • いちせつ
  • にせつ
  • さんせつ
    • いちこう
    • にこう
    • さんこう
• にしょう
  • いちせつ
  • にせつ
    • いちこう
    • にこう
    • さんこう
  • さんせつ
• さんしょう
  • いちせつ
    • いちこう
    • にこう
    • さんこう
  • にせつ
    • いちこう
    • にこう
    • さんこう
  • さんせつ
• よんしょう
• ごしょう

HTML, CSS

<ul class="counter-start">
  <li class="sho">いっしょう
    <ul>
      <li class="setu">いちせつ</li>
      <li class="setu">にせつ</li>
      <li class="setu">さんせつ
        <ul>
          <li class="kou">いちこう</li>
          <li class="kou">にこう</li>
          <li class="kou">さんこう</li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="sho">にしょう
    <ul>
      <li class="setu">いちせつ</li>
      <li class="setu">にせつ
        <ul>
          <li class="kou">いちこう</li>
          <li class="kou">にこう</li>
          <li class="kou">さんこう</li>
        </ul>
      </li>
      <li class="setu">さんせつ</li>
    </ul>
  </li>
  <li class="sho">さんしょう
    <ul>
      <li class="setu">いちせつ
        <ul>
          <li class="kou">いちこう</li>
          <li class="kou">にこう</li>
          <li class="kou">さんこう</li>
        </ul>
      </li>
      <li class="setu">にせつ
        <ul>
          <li class="kou">いちこう</li>
          <li class="kou">にこう</li>
          <li class="kou">さんこう</li>
        </ul>
      </li>
      <li class="setu">さんせつ</li>
    </ul>
  </li>
  <li class="sho">よんしょう</li>
  <li class="sho">ごしょう</li>
</ul>


<style type="text/css">
ul.counter-start {
  counter-reset: s_number;
}
li.sho:before {
  counter-increment: s_number;
  content: counter(s_number) ". ";
  counter-reset: st_number;
  font-weight:bold;
}
li.setu:before {
  counter-increment: st_number;
  content: counter(s_number) "-" counter(st_number) ". ";
  counter-reset: k_number;
}
li.kou:before {
  counter-increment: k_number;
  content: counter(s_number) "-" counter(st_number) "-" counter(k_number) ". ";
}
</style>