link 要素を可視化してみる

今日はとても面白い1日だった。いや別に仕事とかプライベートとかじゃなく、ガリガリ CSS 書いてて楽しかった。
なんとなく「できるかなー」と思ってグリグリ2時間くらい費やした甲斐があった。でもあとで調べたらいい感じの記事があって、「こっち参照でいいんじゃない？」とも思ったが、せっかくなので残しておく。

と言うわけでまたここからで申し訳ないんですが、パンくずリストがベストとは限らない | WWW WATCH を見て「link 要素を可視化させちゃえば（ちょっとだけ）解決できるんじゃない？」と思ってやってみた。

XHTML の記述を例えばこんな感じに。

<link rel="start" href="index.html" title="最初のページへ" />
<link rel="next" href="next/index.html" title="次のページへ" />
<link rel="prev" href="prev/index.html" title="前のページへ" />

で、CSS はこう。

head {
display: block;
}

link {
display: block;
width: 100%;
}

link::after {
content: attr(title);
}

• サンプルその1

最小で書くとたったこれだけで可視化は可能。一番重要なのは head 要素を可視化するのが必要。ここでは display プロパティの値を block にしているが、inline でも問題ない。あくまで表示するだけならば値を inline でも良いですが、link 要素の display プロパティの値が block になっているのと、ルートの html 直下にインライン要素が配置されるのは不自然なので、head 要素はブロック要素として扱うのが良いです。
ちなみに link 要素に疑似要素の ::after が付随しているので当然のことながら IE だと無理です。IE 対応しようと思ったら JavaScript でアレコレやらないと多分無理だと思います。

ただこれだとちょっと味気ないので、ちょっとだけ装飾してみる。

head {
display: block;
padding: 5px 5px 10px;
border-bottom: solid 1px #ccc;
}

link {
display: inline;
font-size: 80%;
color: black;
padding: 3px 5px;
border: double 3px #ccc;
border-color: #ccc #666 #666 #ccc;
}

link:hover
{
border-color: #666 #ccc #ccc #666;
}

link[rel="start"]::after {
content: "ホーム";
}

link[rel="next"]::after {
content: "次へ";
}

link[rel="prev"]::after {
content: "前へ";
}

• サンプルその2

title 属性をそのまま使わず、単語で分かりやすく表記してボタンっぽいデザインにするとそれらしく見える。

ただこれらの方法ではいくつか問題点がある。

• Opera だとリンクなしで表示される
• tab キーで選択できない
• head 要素内にあるのを無理矢理可視化させたので、ページ内のコンテンツと組み合わせるのが難しい
  • position プロパティを使ってアレコレやればできるけど、またブラウザの問題（CSS の解釈とかなんとか）が出てくる

Opera の問題ですが、否定疑似クラスを使うっぽいと思ってるけどあまり理解してないので今回は見送りです。本当に否定疑似クラスなのかさえ定かでない。。。
tab キーによる選択が出来ないのは致命的です。こればっかりは Firefox の実装の問題なのでお手上げ。
position: fixed; でブラウザの上部または下部に固定してしまうってやり方はアリだと思いますが、また IE が邪魔するわけですよ。
結局のところ、使える場面があるのか無いのかはっきりしないです。やろうと思えば出来るけどクロスブラウザじゃないよ、って感じでしょうか。

余談ですが、リンクタイプの rel 属性の値 netx と prev は ブログのテンプレート内に入れて今回のようなナビゲーションとして使うと便利かもしれません。Movable Type のテンプレートタグを使って

<MTEntryNext><link rel="next" href="<$MTEntryPermalink$>" title="<$MTEntryTitle remove_html="1"$>" /></MTEntryNext>
<MTEntryPrevious><link rel="prev" href="<$MTEntryPermalink$>" title="<$MTEntryTitle remove_html="1"$>" /></MTEntryPrevious>

なんて書くといいかもしれません。（たぶんデフォルトのテンプレートにこれが記述されていると思います。さっぱりそんなの忘れ去ったので確認できませんが。）

さらに余談ですが、大元の記事であるパンくずリスト（Topic Path）のマークアップに関して、番号（順序）付きリストでマークアップするのがベターなのかと思います。あと番号なし（箇条書き）リストではちょっと意味が違うかなぁ、とも思うけど、入れ子にしていくのもアリだと思う。ただ、段落でマークアップするのを否定するわけじゃないし、それはそれで解釈として正しいはず。
仕様の方に話が飛ぶのもアレだけど、手元にある素材（要素）で料理（マークアップ）するのに、必要状況下でその素材（要素）が無い、もしくは当てはまらないとなったら何かしらで代替を用意するしかない。けどだからと言ってパンくずリストのための要素を用意（仕様策定）するのは本末転倒。だから今あるものでやるしかないのです。正解があるわけじゃないかもしれないけど（日本語がおかしい）、自分が正解だと思えるやり方でいいと思います。だから自分は番号付きリストでやる。それだけです。

追記 2007年2月9日 23：00

記述ミス修正

追記 2007年2月14日 10：51

head 要素の取り扱いについて加筆修正