動かざるパンくずリストの作り方

ISO-HTML: DIVと見出し要素のお話のページ下部に、試験的に出現させていた(現在はありませんが)、動かないパンくずリストの作り方をご紹介。(今ご覧の、このページにも出してあります。)

あれの真価が発揮されそうなところというと、メインのテキストがあまりにも長文になってしまって、見てる人にも、読んでる途中から、文頭、ないし、文末のナビゲーションリストまで戻らせるのも悪いし、何かいい方法でナビゲーションできないかしら。そんな場面だと思います。

まあまあ、簡単にできるので、一度、ご覧ください。

HTMLの部分

CSSというのは、適用する対象の木構造あってのものなので、まずは、こちらの解析木、HTMLのお話をしなければ。

以下に挙げるようなパンくずリストを文書の一番後ろ辺りに差し込むところから、作業は始まります。差し込む場所は、できる事なら、BODY要素の終了直前が良いでしょうか。基本、テキストの流れを妨げない、適当なところへどうぞ。

現行のHTML/XHTMLの場合

現行のHTML/ISO-HTML/XHTMLの場合、パンくずリストって、アンカタグ入りのベタテキスト(#PCDATA)かP要素として書くことが多いはず。ここでは、問答無用で、段落要素に放り込んでもらいます。

<p class="nav2"><a href="./index.html">HOME/Index</a> → <a href="./hoge_n_me/index.html">ほげと私</a> → ほげの正しい飼育法</p>

UL要素でもいいんですけど、今回はちょっと手間とややこしさを避けたいので、これで折れてください。

ISO-HTMLの場合、このリストの直前にアウトラインを破綻させない度数の見出し要素か、HR要素かを配置してもらった方がいいだろうか。それとも、このリスト自体をDIV要素で囲むか。仕様書や自分の考えと向き合いながらご検討ください。

HTML5の場合

こっちでは、この手のナビゲーション向けに、nav要素があるので、それを使います。

<nav><p><a href="./index.html">HOME/Index</a> → <a href="./hoge_n_me/index.html">ほげと私</a> → ほげの正しい飼育法</p></nav>

CSSの部分

本題です。

ここでやりたいこと。

箇条書にするまでもなく、これひとつだけなんです。しかし、これだけでは楽しくないので、幾つか、遊びを入れます。

ここまですると、ちょっと楽しそうに見える、このページ。ええ。基本地味なんです。分かるでしょ? こんな地味なページをやってる人間が、そんな派手で面白いこと知ってると思……おっと失礼。

パンくずリストに対するCSS

現行のHTML版を基本にやっていきますんで、問題のCSSを"p.nav"というセレクタに適用させます。ご自身の書いた解析木に合わせて、適宜セレクタ名を読み替えてください。

p.nav2 {
background-color: rgba(245,245,245,0.8);
color: rgb( 36, 36, 36);
position: fixed;
bottom: 1em;
width: 60%;
font-size: 80%;
line-height: 150%;
text-align: center;
border-width: 1pt;
border-style: solid;
border-color: rgb(0, 64, 128);
box-shadow: 2pt 2pt 3pt rgba(0, 64, 128,0.75);
}

上から行こうかな。

まず、一行目が、パンくずリストの背景色と透過度合い。そう。"rgb"の後ろに"a"ってついてるでしょ。前3つは、rgb(赤緑青)に対応する数字で、それぞれ、0を最小、255を最大値にとる形の、普通の色指定。4つ目の、a(アルファチャンネル)に対応している数字が、透過の度合いを指定します。aの数値は、0(透過最大/透明)〜1(不透過)の範囲を取る任意の少数です。

この方法で透過度合いを指定する場合は、16進数(#FFFFFFみたいな奴)や色名(blueとかwhiteとか)による色指定はできません。飽くまで、agbに透過度(a)の指定を追加するというやり方になります。

逆に、16進数や色名で色指定しながらにして透過度も指定したい場合は、opacityというプロパティがありますんで、そっちを使ってください。使い方は、opacity:0.6;などで。値については、上のやり方と同じですが、効果のかかり方が少し変わりますんで悪しからず。

RGBaは、セレクタに対する指定ではなく、プロパティに対しての色指定の形を取るので、色を指定するプロパティ——文字、背景、ボーダー、影など。——それらに対して、個別に透過度を指定することが可能です。

対するopacityプロパテイは、セレクタそのものに対し直接透過度だけを指定するものなので、例えば、p要素にopacity:0.5;とやると、文字も背景もボーダーも、p要素を構成するパーツ全てに一括して、同じ透過度が指定されます。

色指定に絡めた透過度指定のできない、画像などのコンテンツについては、opacityで指定することになります。

二行目は、パンくずの文字色。

三行目、四行目には、positionプロパティと位置指定です。何に対してfixedで、bottom:1emなのかというと、うちのページの場合、これの親要素にpositionプロパティを指定していない(すべてが初期値"static"である)ため、HTML要素(というか、UAの表示域そのもの)が基準になります。親要素にposition:absoluteを指定している場合は、そちらの親要素からみた位置になります。ここさえ抑えれば、実は、他はお好みでOKです。

更にその下五行目〜十一行目では、パンくずの幅をページの横幅と同じ60%にして、フォントサイズが普通の文字の八割、テキストの配置はセンターで、パンくずの縁取りは1ポイントでソリッドで青っぽい色です、ということを指定してます。

十二行目が、ボックスに影をつけるbox-shadow。値は、前から2つは影のオフセット幅。前の数字が横方向。次の数字が縦方向です。両方正の値で、影が、右、下にズレ、負の値だと、それぞれ、左、上にズレます。三番目は、影の滲み幅。負の値は入れられません。四番目に影自身の色指定。rgbaを使用することで、影自身の透過度も指定できます。

body要素に対するCSS

ええ、次に、上の設定を活かすには、こちらも必要です。

body {
margin-bottom: 6em;
}

この記述が何を成しているかというと、本文のラスト数行は、固定されたパンくずが上にかぶさったまま動かないので、その部分が読めなくなってしまうわけですが、それを避けるために、ページに対して最後から、この例だと六文字分の幅、下方向に伸びる『ガワ』、marginを確保してあります。

これによって、つまり、六文字分余計に、上にスクロールできるようになったため、パンくずが乗っかって読めないという行がなくなります。

この辺の設定も、本文にかぶさらない範囲の、各々お好きな数字でいいと思います。

完成

結果、完成したものが、このページの下の方に出ている、それになります。

尚、実際の使用に際して、もし、本当にメインのナビゲーションを入れるのであれば、アクセスキーの設定(A要素へのaccesskey属性と値の付与)はきちんとしたほうがいいかも知れません。

それから、パンくずの背景色と文字色を、地のページの色と違う色にしてやると、もう少し、見やすいというか、気づいてもらえやすいかもしれないですね。基本的に、position:fixed; と何かしらの位置指定さえしてあれば、他は、お好きに……という代物なので、遊び様はあると思います。

興味のある人は、お試しあれ。

このページについて

ナビゲーションリストのテスト