HTMLのリストの先頭記号を変更する方法

HTMLで作成したリストの先頭記号を変更する

先頭記号をローマ数字に変更する方法

HTMLで作成したリストでは、ulタグに対してcssでセレクタを設定すると、
先頭記号を様々な種類に変更することができます。

今回は例として先頭記号をローマ記号に変更する方法を記述します。
まずは下のようにHTMLでリストを作成し、先頭記号を変更したいulタグに任意のclassをつけます。

html

  <h2>通常のリスト</h2>
  <ul>
    <li>にんじん</li>
    <li>じゃがいも</li>
    <li>玉ねぎ</li>
  </ul>

  <h2>小文字のローマ数字のリスト</h2>
    <ul class="romaA-list">
    <li>にんじん</li>
    <li>じゃがいも</li>
    <li>玉ねぎ</li>
  </ul>

  <h2>大文字のローマ数字のリスト2</h2>
    <ul class="romaB-list">
    <li>にんじん</li>
    <li>じゃがいも</li>
    <li>玉ねぎ</li>
  </ul>

続いてcssに以下のように記述します。
htmlで記述した任意のクラス名にlist-style-type: 〇〇;を記述することで、
リストの先頭記号を変更することができます。

css

.romaA-list{
  list-style-type: lower-roman;
}

.romaB-list{
  list-style-type: upper-roman;
}

小文字のローマ数字の場合→lower-roman
大文字のローマ数字の場合→upper-roman

これで下記のように先頭記号を変更したリストが作成できました。

他に指定できるリストの先頭記号

cssのlist-style-type記述を変更すると、他にも様々な記号に変更することができます。
いくつか参考に載せておきますので参考にしてください。
他にも数多くの種類がありますので、興味があれば調べてみてください。

circle

css

.style{
  list-style-type: circle;
}

decimal

css

.style{
  list-style-type: decimal;
}

decimal-leading-zero

css

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

lower-alpha

css

.style{
  list-style-type: lower-alpha;
}

upper-alpha

css

.style{
  list-style-type: upper-alpha;
}