使用するのは『list-style-type』

webのコト

HTMLでリストを表示させるには、"ul"と"ol"のタグを使用します。
"ul"を使用するとリストの先頭は丸や四角などの図形に、"ol"は数字やアルファベットにて表記されます。



移動手段、出発時刻は"ul"、手続き手順は"ol"にてタグを打ちました。

中身はこんな感じ。

<title>Listの先頭記号いろいろ</title>

<style type="text/css">
ul.transport li {
	list-style-type: square;
}

ul.time li {
	list-style-type: circle;
}

ol.pay li {
	list-style-type: decimal;
}

h1 {
	font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"
	font-size: small;
	width: 270px;
}

h2 {
	font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"
	font-size: small;
	border-left: 0.7em solid #009933;
	width: 200px;
}
	
hr {
	width: 250px;
}
</style>
</head>

<body>
<h1>旅行プラン選択肢：</h1>
<h2>移動手段</h2>
<ul class="transport">
<li>飛行機</li>
<li>新幹線</li>
<li>高速バス</li>
</ul>

<h2>出発時刻</h2>
<ul class="time">
<li>午前</li>
<li>午後</li>
<li>夜</li>
</ul>
<hr />

<h2>手続き手順</h2>
<ol class="pay">
<li>ネットで予約</li>
<li>カードで決済</li>
<li>店舗で切符受け取り</li>
</ol>
</body>
</html>

以下のようにcssの"list-style-type"の部分を変えるだけで、簡単に先頭記号を変更することが出来ます。