箇条書き

これから覚える方々へ。こんな目次のときに よくつかう、ぶら下げインデントのスタイルシートです。

• じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのやぶこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけ
• 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

ul.Doraemon li {

	background	: url("画像へのパス") no-repeat 0 0.5em;

	padding		: 0 0 0 25px;

}

<ul class="Doraemon">

	<li><a href="#">じゅげむじゅげむごこうのすりきれ……</a></li>

	<li><a href="#">寿限無寿限無五劫の擦り切れ……</a></li>

</ul>

li にカーソル画像を表示する方法です。また、カーソル画像「ココ→」の上余白をem単位で指定することで、ブラウザで多少 文字を拡大・縮小されても、文字サイズに合わせてカーソルが“ほぼ”上下の中央寄りに位置してくれます。（pxだと固定なので、文字サイズが変わると すぐに中央から離れていきます。）カーソル画像「ココ→」の幅は22pxなので、li の左paddingを25pxにしました。