昔から当たり前のように使われてきた"|"。
1行の文章(リスト)を区切るために使われてきたわけですが、例えば
ダイナマイト | 四国 | Comments(2) | Trackbacks(3)
のような感じ。
しかしこれって、よくよく考えるとHTMLで"見た目"を制御してるって感じるのですよ。
"見た目"はCSSって考えているんで、というより自分のサイトをXHTML1.0 Strictで作っているんで、ただ単にW3Cのチェックに引っかから無ければ良いというのが納得いかないわけですよ。
じゃあ何のタグを使うのか?
- <p>
- 今まで使ってきたが、これはどうも違う。段落を表すタグなので。
- <li>
- たぶんこれが最適じゃないかと考えた。実際、リストなわけだし。
CSSでは
- li {display: inline}
- li {float: left}
のどちらかを使ってリストを横並びにしてマージンを付ければ間が空く。さらにborderを指定して縦の区切り線を付ける。これでとりあえずは、OKだと勝手に判断。
例(インラインでスタイル放り込んでいます)
- ダイナマイト
- 四国
- Comments(2)
- Trackbacks(3)
少しいじればこんなことも
- ダイナマイト
- 四国
- Comments(2)
- Trackbacks(3)
パンクズリストはどうすりゃイイのさ。
更に考えると、企業サイトなどでよく見かける階層を表す"パンくずリスト"
Home > ラーメンについて > とんこつラーメン > 高菜
は、どうやって解決すればいいのか?
パンくず"リスト"って言ってるんだから当然リストタグじゃないとおかしいわけですよ。でも、上記の方法じゃ区切りの縦線は引けても、鍵括弧">"は表せない。
そこで、登場するのがCSSの擬似要素とcontentかと。CSSでリストを横並びにした後、
li:after {content: ">";}
これでリストタグのお尻に>が入る。(実際は最後の"高菜"のお尻にも>が付くんですけど、その辺はidか何かで制御すれば解決すると思います)
ブラウザ王者IE6には通じない
ここまで何となく理解できている人はたぶん気付いていると思いますが、:afterとcontent両方ともIEではサポートされていないわけですね(2005年11月現在)。
じゃあ使えねー、となるわけです。現状ではどうしようも無いんすかね。
パンくずリストはだまって<p>使ってるのが無難でしょうか。
長々書いてきたオチはこれでした。
ちなみに現在フッターで"|"を使ってます。
ヒント：address要素
自分的には納得いっていません(自分でやっていることに)。orz。
