閉じる
閉じる

あまめも

<ol>タグの表示を変更する際のtype一覧リスト

HTML

こんにちは! あますた(@amaguristar)です。

  • 「HTMLの<ol>タグのスタイルを[1、2、3 → 01、02、03 or a,b,c]などに変更したいけどやり方が分からない」

って事を最近聞かれるのでメモ。

 

csslist-styleプロパティを設定

具体的に何ができるかと言うと、

<ol>
<li>てすと1</li>
<li>てすと2</li>
<li>てすと3</li>
</ol>

というリストの表示は通常

  1. てすと1
  2. てすと2
  3. てすと3

ですが、これを

  1. てすと1
  2. てすと2
  3. てすと3

の様に「01」表示にしたりする事が可能。

※ その他の表示(あ、い、う or a,b,c or i,ii, or い、ろ、は)等は最後に一覧にしてあります。

cssの設定

具体的な設定はcssでコードを書き込み。

.sample-list {
    list-style: decimal-leading-zero;
}

HTMLで下記のように記入。

<ol class="sample-list">
<li>てすと1</li>
<li>てすと2</li>
<li>てすと3</li>
</ol>

これだけで「01」表示のリストが作成可能。

list-styleプロパティを設定すれば色々な表示が可能。

list-styleプロパティは本来list-style-typelist-style-imagelist-style-positionの3つをまとめて設定する際に使用しますが、今回はlist-style-typeのみの説明です。

まとめ

上記「cssの設定」で説明したコードを流用して下記に一覧を作成。

list-style: lower-roman
  1. てすと1
  2. てすと2
  3. てすと3
list-style: upper-roman
  1. てすと1
  2. てすと2
  3. てすと3
list-style: lower-greek
  1. てすと1
  2. てすと2
  3. てすと3
list-style: decimal
  1. てすと1
  2. てすと2
  3. てすと3
list-style: decimal-leading-zero
  1. てすと1
  2. てすと2
  3. てすと3
list-style: lower-alpha
  1. てすと1
  2. てすと2
  3. てすと3
list-style: upper-alpha
  1. てすと1
  2. てすと2
  3. てすと3
list-style: cjk-ideographic
  1. てすと1
  2. てすと2
  3. てすと3
list-style: hiragana
  1. てすと1
  2. てすと2
  3. てすと3
list-style: katakana
  1. てすと1
  2. てすと2
  3. てすと3
list-style: hiragana-iroha
  1. てすと1
  2. てすと2
  3. てすと3
list-style: katakana-iroha
  1. てすと1
  2. てすと2
  3. てすと3

関連記事

  1. ファイルの管理がめんどくさくなってきたから「Git」使ってみた!…

  2. 【基礎】MySQLのデータ型まとめ

  3. テーブルの背景を簡単に奇数or偶数行で色を変えて見易くしたい!

  4. 線(line)

    【HTML】<hr>タグ(区切り線)を簡単にカスタム…

  5. HPでライン風の対話型吹き出しの表示に枠を付けたい!!ってなった…

  6. Gitを使用してると「このファイルは管理しないんだけど・・・」っ…

こんなメモもありますよ♪

  1. パインアメサワー
  2. 珈琲館

Twitter

ページ上部へ戻る