Webサイトで一覧形式を使って書くと、
ただだらだら書くより見やすくなるとして、
一覧の作り方、
その時に使える記号等をご紹介しました。
今回は、まだご紹介していない方法をご紹介したいと思います。
contents
連番の前に文字を入れる方法
例えば、連番の前に「No.」を入れたリストを作ってみたいと思います。
世界の人口ランキングTOP3
- 中国：1,435,651千人
- インド：1,352,642千人
- アメリカ：327,096千人
＜ol＞ ＜li＞中国：1,435,651千人＜/li＞ ＜li＞インド：1,352,642千人＜/li＞ ＜li＞アメリカ：327,096千人＜/li＞ ＜/ol＞
/* No.表示 */
.population ol {
list-style: none;
counter-reset: count 0;
}
.population li:before {
content: "No." counter(count);
counter-increment: count 1;
}
CSSの内容は以下となります。
- list-style: none;
デフォルトの数字表記を消す場合に、入れます。
- counter-reset: count 0;
必ずカウンタを初期化して、数字なら1から始まるようにします。
- .population li:before {
- 〜〜〜
- }
populationというクラス名内のliタブの前に文字などを入れたいときに使います。
- content: “No.” counter(count);
counter(count)が連番です。
“No.”が連番の前に入れる文字列です。
- counter-increment: count 1;
連番を1,2,3と+1にする場合は、1を、
1,3,5と+2とする場合は、2を書きます。
数字の後ろに必ずスペースを入れたい場合は、
- content: “No.” counter(count)” ”;
スペースの前後にダブルクォーテーション（””）を入れます。
連番の後ろに文字を入れる方法
例えば、連番の後ろに「月」を入れたリストを作ってみたいと思います。
- 睦月
- 如月
- 弥生
- 卯月
- 皐月
- 水無月
- 文月
- 葉月
- 長月
- 神無月
- 霜月
- 師走
＜div class="month"＞ ＜ol＞ ＜li＞睦月＜/li＞ ＜li＞如月＜/li＞ ＜li＞弥生＜/li＞ ＜li＞卯月＜/li＞ ＜li＞皐月＜/li＞ ＜li＞水無月＜/li＞ ＜li＞文月＜/li＞ ＜li＞葉月＜/li＞ ＜li＞長月＜/li＞ ＜li＞神無月＜/li＞ ＜li＞霜月＜/li＞ ＜li＞師走＜/li＞ ＜/ol＞ ＜/div＞
/* 月表示 */
.month ol {
list-style: none;
counter-reset: count 0;
}
.month li:before {
content: counter(count) "月 ";
counter-increment: count 1;
}
先ほどのNo.と変わったところは、
contentのところだけですね。
counter(count)が連番なので、
その前後に入れる文言をダブルクォーテーション（””）で囲めばいいことがわかると思います。
まとめ
いかがでしたか？
ルールがわかれば、いろいろな連番が作れますね。
すでにご紹介した連番と組み合わせると、
様々なリストを作ることができますね✨
コメント