このページのナビゲーションのところ、階層を表ししてるんだから、HTMLも階層構造をしてるのが分かりやすいんじゃないかと思って、前々回から以下のようなHTMLを書いてみました。
あ、今回からsyntaxhighlighter使って、コードを装飾してます。
<code>で囲ってないのが、ちょっと気持ち悪い。
本文中に書くコードは<code>で括ってなくても気持ち悪くないという中途半端な私ですが。
<nav> <ul><li><a href="http://tonbi.jp/" title="鳶嶋工房">Top</a> <ul><li><a href="../../" title="Web技術">Web</a> <ul><li><a href="../" title="学習日記">Diary</a> <ul class="currentPage"> <li><a href="../018/" title="CSS3をちょっと触ってみる">←Prev.</a></li> <li><a href="../020/" title="">→Next</a></li> </ul> </li></ul></li></ul></li></ul> </nav>
うーん、上手にCSSで装飾できない。
HTMLの構造的には変な解釈ではないと思うけど、単にコードが増えただけな気がする。
<span class="aggregate">みたいなタグで囲って、包含関係を示すってのも手かなとも思う。
今回はナビゲーションのメタタグと同じclassを付けて階層を表してみた。
<nav class="breadcrumb"> <a class="start">Top</a> <a class="chapter">Web</a> <a class="section">Diary</a> <a class="prev">Prev.</a> <a class="next">Next.</a> </nav>
そしてスタイルシート。
/* パンくずリスト */
.breadcrumb a {
display: inline-block;
width:5em;
height:2em;
background-color:silver;
text-align: center;
line-height:2em;
}
.start {
position:relative;
border-radius:2em 0 0 2em;
z-index:4;
}
.start:after, .chapter:after {
content: "";
position: absolute;
top: 0;
left: 5em;
width: 0;
height: 0;
border-width: 1em 8px;
border-style: solid;
border-color: transparent;
border-left-color: silver;
}
.chapter:before, .section:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-width: 1em 8px;
border-style: solid;
border-color: transparent;
border-left-color: white;
}
.chapter {
position:relative;
z-index:3;
}
.section {
position:relative;
border-radius:0 2em 2em 0;
z-index:2;
}
.prev {
border-radius:2em 0 0 2em;
}
.next {
border-radius:0 2em 2em 0;
}
…たったこれだけの事を実現するのに、コード書き過ぎです。
borderの左側だけ色塗ったものを使って三角形を作って、それを並べたり重ねたりしてます。間の白い部分は改行でできた1文字分のスペース。
もうちょっと凝ろうと思ってグラデーションとか影とか付けたらもう、コードを理解できないよ、自分で書いたコードが理解できないよ!!
てゆーかですよ。このくらいになってくるともうSVGでやれと、そういう事なんでしょうか。
このページでの装飾みたいに、現在のページと同階層のページをタブにする、というビジュアル表現は結構微妙な気もしてきた。
普通タブ表現するときは、現在のページがタブの表に出てきて、同階層の別ページは奥に行くものだもんな。
となると、タブを使った表現がそもそも変だな。
今日はここまで。