印付きリストを実現する

カテゴリ:CSSテクニック 2006年8月 9日 09:07

知ってはいたのに、忘れていてついめんどくさい作り方をしてしまったので、備忘録的にも書いてみたいと思います(*'-')
今回も:before疑似クラスとcontentプロパティが出てきますが、一体いつになったらこれを気兼ねなく使えるようになるんだ…。n

さてさて、みなさんは印付きリストを作成するときはどうやって作っていますか?
ナカグロ(・)や、数字、ローマ数字ならば ul 要素や ol 要素をそのまま使うだけで事足ります。
しかし例えば、「■」や「●」などを頭に置きたい、という場合もあるんじゃないでしょうか。n

▼EntryMore▼

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

CSS ソース

ul 要素のlist-styleをなしにしないと、さらにその左側に「・」がくっついちゃうので消しています。
リスト部分はこんな感じ。n

HTMLソース

さて、見ていて分かったかと思いますがli要素にそれぞれ別の class が指定されています。
最初の 2 つがlist-test1
最後の 2 つがlist-test2
上に書いた CSS ソースはlist-test2のものです。n

本文を見てもらうと分かりますが、list-test2では頭に印となる文字が書かれていますよね?
どちらも指定している内容は一緒なんですが、list-test2の場合、もし頭に使っている文字を変更しようとすると HTML 部分に書かれている「■」をそれぞれ変更していかないといけません。n

これくらいの数ならなんでもないですが、複数ページに、かつそれが 100 個も 200 個も、となったらめんどくさいですよね。
それを解決するのが上のlist-test1の書き方です。n

CSSソース

これが冒頭で言った:before疑似クラスとcontentプロパティです。
:before疑似クラスのcontentプロパティで、指定された要素の直前に書かれた文字などを表示します。(この場合は「●」)n

そのあとで、liste-test2と同じように 1 文字だけ字下げをマイナス方向に取り、かつmarginを同じ分だけ指定して体裁を整えています。n

こうすることで、仮にこの「●」を「○」に変更しようとても、CSS ファイルのこの 1 カ所を修正するだけですべての表示が切り替わります。n

ちなみに「em」は「1 文字分の幅」に相当するので、文字サイズを変更してもきれいに文章の左がそろいます。n

余談ですが、IE7 のベータ版ではこのcontentプロパティをまだ実装していないんだとか。
正式リリース時にこれが使えないとなると、気兼ねなく使えるようになるのは相当先になりそう…。n

是が非でもこれは追加してほしい機能のひとつですね。
てか、技術的にそれほどむずかしくないと思うのに、なぜ実装しないのかが謎です…。n

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/17