「富士通館林システムセンターの電源装置故障はUPSの切替動作障害」で引用したソニー銀行リリース文中で、リスト要素がカッコ付き数字になっている。これはどうやって表現しているのか。ソースとスタイルシートを見ると、カッコ付き数字はそのまま本文に書き、text-indentプロパティをマイナスにして、その分だけpadding-leftプロパティをプラスにしていた。なるほど、これでマーカーなしにすれば、カッコ付き数字や丸囲み数字のリストが出来る。

OKWaveでは、リスト項目ごとに<div>タグでスタイルを適用する方法をベストアンサーにしているが、リストなのだから<ul>タグ、<li>タグで表現するほうがよい。

OKWave「リストの記号を括弧付きの文字にしたい」

ということで、スマートな記述がこれ。マーカーなしにすると、その分だけ全体がインデントされたように見えるので、左マージンをマーカーの幅だけマイナスにする。

（スタイルシート）

ul.notice li {
	list-style:none;
	text-indent:-2.5em;
	padding-left:2.5em;
	}

（ソースと実際の表示）

<ul class="notice">
	<li>（1）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li> 
	<li>（2）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
	<li>（3）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
</ul>

• （1）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
• （2）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
• （3）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

丸囲み数字の場合は機種依存文字なので、数値文字参照を使う。ユニコード依存なので紹介しているところが少ないが、「もうパンツはかない」が詳しい。

（スタイルシート）

ul.notice2 li {
	list-style:none;
	text-indent:-1.5em;
	padding-left:1.5em;
	}

（ソースと実際の表示）

<ul class="notice2">
	<li>&#9312;&nbsp;ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li> 
	<li>&#9313;&nbsp;ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
	<li>&#9314;&nbsp;ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
</ul>

• ① ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
• ② ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
• ③ ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

リスト要素は、スタイルシートで指定がないとデフォルトでインデントされる。このため、ソニー銀行のように本文とリストの前ツラを合わせたい場合は、margin、paddingを0にすればいい。

（スタイルシート）

div.notice3 ul {
	margin:0;
	padding:0;
	}
div.notice3 li {
	list-style:none;
	text-indent:-2.5em;
	padding-left:2.5em;
	}

（ソースと実際の表示）

<div class="notice3">
<ul>
	<li>（1）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li> 
	<li>（2）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
	<li>（3）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
</ul>
</div>

当サイトでは部分的に変更するのに<div>タグを使ったが、サイト全体に適用する場合は、スタイルシートの先頭でユニバーサルセレクタ（全称セレクタ）として全要素のmargin、paddingを0にし、あとから要素ごとに個別設定するのが一般的だ。ソニー銀行もそうしている。

* {margin:0; padding:0;}