クリエイター：コーディング備忘録ブログ

RSS

コーディング

counter-increment

2017.02.03

連番リストなんてolでいいじゃないか。
まぁそう言わずに、counter-incrementを使えば、
単純な連番以外にスタイルも自由に付けられるのです。

サポートしているブラウザについては↓

HTMLソース

<div class="sample">
<ul>
<li>旅立ち
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
</li>
<li>出会い
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
</li>
<li>別れ
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
</li>
</ul>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<div class="sample">

<ul>

<li>旅立ち

<ul>

<li>タイトル</li>

<li>タイトル</li>

</ul>

</li>

<li>出会い

<ul>

<li>タイトル</li>

<li>タイトル</li>

</ul>

</li>

<li>別れ

<ul>

<li>タイトル</li>

<li>タイトル</li>

</ul>

</li>

</ul>

</div>

CSS

.sample ul {
    counter-reset: number;
    list-style: none;
}
.sample ul li {
    counter-increment: number;
}
.sample ul li:before {
    content: "第"counters(number, "-")"章";
}

1

2

3

4

5

6

7

8

9

10

.sample ul {

counter-reset: number;

list-style: none;

}

.sample ul li {

counter-increment: number;

}

.sample ul li:before {

content: "第"counters(number, "-")"章";

}

できたのが↓

旅立ち
- タイトル
- タイトル
出会い
- タイトル
- タイトル
別れ
- タイトル
- タイトル

漢字にもできます↓

旅立ち
出会い
別れ

この記事を見た人は次の記事も見ています。

グラデーションのあるボーダー作成

前の記事

【Google Adwords】GDN ターゲティング設定

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

WEB広告の話(ターゲティング編)

2021.02.24

コーディング

リスト以外の要素をカウントする

2017.08.24

コーディング

第三十九回「EWWW Image Optimizerプラグインで画像を自動圧縮」

2016.06.17

コーディング

WordPressでの条件分岐

2018.05.23

コーディング

Dwテンプレート

2017.06.06

コーディング

display:inline-blockでできる隙間を消す方法

2017.02.27