💬
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;
}
これで下記のように先頭記号を変更したリストが作成できました。
他に指定できるリストの先頭記号
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;
}
Discussion