トップ  >  2016年  >  2016.03.15 [CSS] 連番
features [CSS] 連番
2016.03.15記
今回はCSSの「counter-increment」を使った連番を試してみます

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

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>
もっとスマートにCSSが書けるかも
前
2016.04.15 [jQuery] スクラッチカード
カテゴリートップ
2016年
次
2016.02.15 [jQuery] dropzone.js

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999 keibunsya all right reserved.