リスト編
黒丸(基本)
ul li{
list-style-type: disc;
}
黒丸(基本)+リストマークのみ色付け
<ul>
<li><span>りんご<span></li>
<li><span>いちご<span></li>
<li><span>みかん<span></li>
</ul>
ul li{
list-style-type: disc;
color:#F7931E;
}
ul li span{
color:#000;
}
先頭の文字(数字)に背景色
HTML
<ul>
<li><span>1</span>いちご</li>
<li><span>2</span>みかん</li>
<li><span>3</span>りんご</li>
</ul>
CSS
ul{
list-style:none;
margin:0;
padding:0;
}
ul li{
list-style:none;
margin-bottom:5px;
}
ul li span{
background-color: #172c5b;
color: #fff;
margin-right: 5px;
padding: 2px 5px;
text-align: center;
width: 2.5%;
}
白丸
ul li{
list-style-type: circle;
}
四角
ul li{
list-style-type: square;
}
ローマ字(大文字)
ul li{
list-style-type: upper-roman;
}
ローマ字(小文字)
ul li{
list-style-type: lower-roman;
}
数字
ul li{
list-style-type: decimal;
}
0付き数字
ul{
padding-left:28px;
}
ul li{
list-style-type: decimal-leading-zero;
}
アルファベット(大文字)
ul li{
list-style-type: upper-alpha;
}
アルファベット(小文字)
ul li{
list-style-type: lower-alpha;
}
漢数字
ul{
padding-left:33px;
}
ul li{
list-style-type: cjk-ideographic;
}