印付きリストを実現する。

▼EntryMore▼

内容はいたって簡単。
text-indentを使って字下げをマイナス方向に指定してやります。
そして、その文字が1文字左に飛び出した分だけ左にmarginを指定してやります。
つまり、最初の1文字だけ左に飛び出させて、その飛び出した分だけ戻してやる、といった感じです。
ソースはこんな感じ。

ul{
list-style: none;
}
#content .list-test2{
text-indent: -1em;
margin-left: 1em;
}


ul要素のlist-styleをなしにしないと、さらにその左側に「・」がくっついちゃうので消しています。

リスト部分はこんな感じ。

<ul>
<li class="list-test1">List Item1 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
<li class="list-test1">List Item2 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
<li class="list-test2">■List Item3 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
<li class="list-test2">■List Item4 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
</ul>


さて、見ていて分かったかと思いますがli要素にそれぞれ別のclassが指定されています。
最初の2つが「list-test1」。
最後の2つが「list-test2」。
上に書いたCSSソースはlist-test2のものです。
本文を見てもらうと分かりますが、list-test2では頭に印となる文字が書かれていますよね？
どちらも指定している内容は一緒なんですが、list-test2の場合、もし頭に使っている文字を変更しようとすると HTML部分に書かれている「■」をそれぞれ変更していかないといけません。
これくらいの数ならなんでもないですが、複数ページに、かつそれが100個も200個も、となったらめんどくさいですよね。
それを解決するのが上の「list-test1」の書き方です。

ではCSSソース。

#content .list-test1:before{
content: "●";
}

#content .list-test1{
text-indent: -1em;
margin-left: 1em;
}

これが冒頭で言った:before疑似クラスとcontentプロパティです。
:before疑似クラスのcontentプロパティで、指定された要素の直前に書かれた文字などを表示します。
（この場合は「●」）
そのあとで、liste-test2と同じように1文字だけ字下げをマイナス方向に取り、かつmarginを同じ分だけ指定して体裁を整えています。
こうすることで、仮にこの「●」を「○」に変更しようとても、CSSファイルのこの1カ所を修正するだけですべての表示が切り替わります。
ちなみに「em」は「1文字分の幅」に相当するので、文字サイズを変更してもきれいに文章の左がそろいます。

余談ですが、IE7のベータ版ではこのcontentプロパティをまだ実装していないんだとか。
正式リリース時にこれが使えないとなると、気兼ねなく使えるようになるのは相当先になりそう…。
是が非でもこれは追加してほしい機能のひとつですね。
てか、技術的にそれほどむずかしくないと思うのに、なぜ実装しないのかが謎です…。