閉じる
閉じる

あまめも

<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. [甘]パンくずリストつけてみた。

  2. 【HTML】サイトにテキストボックスを付けたいって時の設定方法

  3. MarkdownのHタグにクラスを追加する簡単な方法

  4. [甘]コンタクトフォームを「Contact Form 7」プラグ…

  5. 文字

    【HTML】略語の正式名称を簡単に表示する方法

  6. [WordPress]「外部サイトのリンクをアイキャッチ込で分か…

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

  1. 文字関連
  2. info

Twitter

ページ上部へ戻る