前回のパンくずをclassで装飾する件だけど、 rel="next" みたいに、rel属性を使えばいいんじゃねーの?
というか使うべきじゃねーの。
<nav> <ul><li><a rel="start">Top</a> <ul><li><a rel="chapter">Web</a> <ul><li><a rel="section">Diary</a> <ul> <li><a rel="prev">Prev.</a></li> <li><a rel="next">Next</a></li> </ul> </li></ul></li></ul></li></ul> </nav>
とまぁ、こんな感じ(hrefとtitleは省略)なんだけどどうだろうか。
でまぁ、CSSの方はこんな感じで、地味に装飾した。
/* ナビゲーション */
nav ul {
display:inline-block;
margin:0 10px;
padding:0px;
line-height:2em;
}
nav li {
display:inline-block;
margin:0px;
padding:0px;
}
nav a {text-decoration:none;}
a[rel="chapter"]:before,
a[rel="section"]:before {color:gray;content:"> ";}
a[rel="prev"]:before {content:"←";}
a[rel="prev"]:after {color:gray;content:" |";}
a[rel="next"]:before {content:"→";}
結果はこんな感じ。
どうもtext-decorationは、beforeやafter疑似要素の中まで共通しているらしく、下線を丸っとはずすしかなかった。
仕様だとしたら、どうしてそうなったかよく分からん。
ん、もうrelで階層の意味を指定してるんだから、ul使った階層表現は過剰だな…
と思って、同じ階層に並べた。CSSはそのまま。
<a rel="start">Top</a> <a rel="chapter">Web</a> <a rel="section">Diary</a> <a rel="prev">Prev.</a> <a rel="next">Next</a>
ら…、指定したbefore疑似要素が後の要素にまで影響したり、適用されなかったり…うーん、意味不明。Safariで顕著でChromeでも起きたりする…WebKitのバグなのか?なんなのか。
ともかく、属性セレクタと:before、:after疑似要素は相性よくない。
tableタグは表を書くためのタグなんで、それをレイアウトのためだけに使うのは良くないけど、tableレイアウト自体はいいもんだと思うんだよね。
よーするにグリッドレイアウトな訳じゃないですか、大きな意味で。
ふと思い出したけど、Javaのレイアウトシステムは使いにくかったなー、ほんとプログラマが考えたレイアウトシステム、って感じだったよ。
エートなんだったっけ。そうそう、tableレイアウトでした。
CSSにはdisplay:tableって表示設定が用意してあって、他にもtable系の表示方法が指定できるようになっている。
display:tableと<table>、display:tabel-rowと<tr>、display:table-cellと<td>が対応している感じ。
で、テーブル用のタグじゃなくても、上記の対応のような指定をしてやれば、表示上はtable的にレンダリングしてくれる。
…素晴らしくね?
ナビゲーションとかリスト系タグで作ること多いと思いますが、ちょっとタグの無駄が多いような気もするんですわー。
ナビゲーションという性質上、既に<a>で括っているんだから、それをさらに<li>で括るのって、無駄っぽくねーすか。
で、display:table-cellって指定したヤツの外にdisplay:table-rowやdisplay:tableがないと、暗黙の<table>と<tr>を作る仕様だっていうじゃないですか。
<td>相当の要素さえ並べておけば、その外はなくても成立するって、タグが省略できてとてもステキ。
ちなみに、その逆でdisplay:tableやdisplay:table-rowの中には暗黙の<td>が作られるそうな。
:beforeや:afterはうまくいかなかったけど、疑似じゃないセレクタだとちゃんと動くっぽいので、その辺で装飾してやると良いと思う。
てなわけで、今回のページのパンくずナビゲーションは<nav>の中に<a>を入れといて、あたかもそれがテーブルのごときレンダリングで表示されるパターンで。
CSSは以下のごとくです。
nav a {
display:table-cell;
width:5em;
line-height:2em;
border:1px silver solid;
text-align:center;
}
a[rel="start"],
a[rel="prev"] {
border-radius:1em 0 0 1em;
}
a[rel="prev"] {
border-collapse:separate;
border-spacing:1em;
color:#66f;
background-color:#f6f6f6;
}
a[rel="section"],
a[rel="next"] {
border-radius:0 1em 1em 0;
}
あ、そういやtableはセルの間とかdisplay:blockとは別の指定方法だったなぁ、…そーいやtableをCSSで装飾とかあんまやった事なかった。
次回、もーちょっとそのへん突っ込んでみたい。
今日はここまで。