数字の表記を変更するには

CSSで対応する

ウェブページの中で、手順や規約内の文章など、olリストを使って文頭に番号を振るケースって結構ありますよね。通常は「1.」とか「2.」などの一般的な表記で問題ないのですが、先日とかなどの丸数字をクライアントから要望されました。

ここで少し悩んだのが、

  • クライアント自身がアップする記事の中で使用する
  • クライアントはHTMLがあまり分からない
  • クライアントは面倒なことはキライ

という点。

なので、いちいち<li>にクラス指定したりするのは難しいかなぁ、と思ったわけです。<li>で挟むくらいならOKとのことだったので、ブログ内で丸数字を使う場合は、olリスト項目を、<li>ではさむだけで自動で丸数字が付与されるようにしてみました。
357-00

CSS

CSSで以下のように記述します。

ol>li {
 list-style: none;
 text-indent: -1em;
 padding-left: 1em;
}
ol>li:first-child:before {
 content: "\2460";
}

CSS解説

まず、olリストのlist-stye(デフォルトで表示される数字)を非表示にします。次に、テキストの開始位置をtext-indentで1文字分前(-1em)にします。これによって、最初の文字が1文字分だけ左に突き出し、2行目以降は1文字分あいて文字が始まるようになります。
357-01

ただ、これだけだと開始位置がページの左へ1文字分突き出てしまいます。なので、ol本体にpadding-leftで1文字分の余白を作ってページの範囲内におさまるよう調整します。
357-02

続いて、olリストの一番目のli(first-child)に対して、その直前(before)に「\2460」を配置させます。「\2460」は「①」をあらわすUSCコードです。これにより、下図のように①が文章の最初に配置されます。
357-03

2番、3番と必要な分だけCSSで隣接セレクタで指定を増やしていきます。

ol>li:first-child+li:before {
 content: "\2461;
}
ol>li:first-child+li+li:before {
 content: "\2462;
}

ただ、今回使っているCSSの手法は、

  • 擬似クラス[first-child] (IE7~)
  • 隣接セレクタ[E+F] (IE7~)
  • 擬似要素[:before] (IE8~)

となるので、IEにおいては8以上の閲覧環境がが必要となります。なので、IE6/7環境も考慮しなきゃいけない場合は、ハックを使ったりjavascirptで動的な対応をさせたり、と別途いろいろと手間が掛かります。また、リストを記述する人がクラス指定に抵抗がなければ、class=”olist02″とかを前提として、CSS側で個々に指定をすればOKです。