【HTML/CSS】いろいろなリストを作ろう（その他編）

ルビ表示切替

Webサイトで一覧形式を使って書くと、

ただだらだら書くより見やすくなるとして、

一覧の作り方、

その時に使える記号等をご紹介しました。

【HTML/CSS】いろいろなリストを作ろう（記号編）

ルビ表示切替 HTMLでただテキストをだらだら書いていると読みづらいと思います。 表や一覧形式を使うだけでも、読みやすくなりますよね。 今回は、HTMLで一覧表示をする方法や、 表示できる種類について...

nekopress.castelodelego.org

2021.05.30

【HTML/CSS】いろいろなリストを作ろう（数字編）

ルビ表示切替 前回、記号を使った一覧表示の書き方をご紹介しました。 今回は、数字を使って一覧表示する方法をご紹介したいと思います。 数字 数字と言っても、以下のようにいろいろな書き方が...

nekopress.castelodelego.org

2021.05.30

【HTML/CSS】いろいろなリストを作ろう（文字編）

ルビ表示切替 前回、記号、数字を使った一覧表示の書き方をご紹介しました。 今回は、文字編です。 文字を使った一覧表示 「文字」というと、どんな文字を思い浮かべますか...

nekopress.castelodelego.org

2021.06.02

今回は、まだご紹介していない方法をご紹介したいと思います。

連番の前に文字を入れる方法

例えば、連番の前に「No.」を入れたリストを作ってみたいと思います。

＜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)が連番なので、

その前後に入れる文言をダブルクォーテーション（””）で囲めばいいことがわかると思います。

まとめ

いかがでしたか？

ルールがわかれば、いろいろな連番が作れますね。

すでにご紹介した連番と組み合わせると、
様々なリストを作ることができますね✨