ul{list-style-type:マークの種類;}でリストマークの種類を指定することが出来ます。

■ リストマークの種類

リストマークの種類には以下のようなものがあります。

【ブラウザ表示】

• 黒丸
• 黒丸

• 白丸
• 白丸

• 四角
• 四角

• 数字
• 数字

• 大文字のローマ数字
• 大文字のローマ数字

• 小文字のローマ数字
• 小文字のローマ数字

• 大文字のアルファベット
• 大文字のアルファベット

• 小文字のアルファベット
• 小文字のアルファベット

• マーク非表示
• マーク非表示

<ul class="mark1">
<li>黒丸</li>
<li>黒丸</li>
</ul>
<ul class="mark2">
<li>白丸</li>
<li>白丸</li>
</ul>
<ul class="mark3">
<li>四角</li>
<li>四角</li>
</ul>
<ul class="mark4">
<li>数字</li>
<li>数字</li>
</ul>
<ul class="mark5">
<li>大文字のローマ数字</li>
<li>大文字のローマ数字</li>
</ul>
<ul class="mark6">
<li>小文字のローマ数字</li>
<li>小文字のローマ数字</li>
</ul>
<ul class="mark7">
<li>大文字のアルファベット</li>
<li>大文字のアルファベット</li>
</ul>
<ul class="mark8">
<li>小文字のアルファベット</li>
<li>小文字のアルファベット</li>
</ul>
<ul class="mark9">
<li>マーク非表示</li>
<li>マーク非表示</li>
</ul>

ul.mark1{list-style-type:disc;}
ul.mark2{list-style-type:circle;}
ul.mark3{list-style-type:square;}
ul.mark4{list-style-type:decimal;}
ul.mark5{list-style-type:upper-roman;}
ul.mark6{list-style-type:lower-roman;}
ul.mark7{list-style-type:upper-alpha;}
ul.mark8{list-style-type:lower-alpha;}
ul.mark9{list-style-type:none;}

<ul style="list-style-type:disc;">
<li>黒丸</li>
<li>黒丸</li>
</ul>
<ul style="list-style-type:circle;">
<li>白丸</li>
<li>白丸</li>
</ul>
<ul style="list-style-type:square;">
<li>四角</li>
<li>四角</li>
</ul>
<ul style="list-style-type:decimal;">
<li>数字</li>
<li>数字</li>
</ul>
<ul style="list-style-type:upper-roman;">
<li>大文字のローマ数字</li>
<li>大文字のローマ数字</li>
</ul>
<ul style="list-style-type:lower-roman;">
<li>小文字のローマ数字</li>
<li>小文字のローマ数字</li>
</ul>
<ul style="list-style-type:upper-alpha;">
<li>大文字のアルファベット</li>
<li>大文字のアルファベット</li>
</ul>
<ul style="list-style-type:lower-alpha;">
<li>小文字のアルファベット</li>
<li>小文字のアルファベット</li>
</ul>
<ul style="list-style-type:none;">
<li>マーク非表示</li>
<li>マーク非表示</li>
</ul>

■ その他の項目

スタイルシート一覧のページに戻る