動かざるパンくずリストの作り方(改訂版)

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

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

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


……という内容の文章なんですが、2016年7月、大幅に改訂、というか、おおよそ、すべて、書きなおしたものです。修正、訂正箇所は、示しませんが、なんとなく、ああ、書きなおしたのね、とか思いつつ、読んでもらえたら、それでいいかな、なんて。

HTMLの部分

CSSというのは、適用する対象の木構造あってのものなので、まずは、こちらのHTMLのお話をしなければ。まずは、パンくずリストを作る工程を、うちのサイトの場合を例に。

現行のHTML/ISO-HTML/XHTMLの場合、NAV要素がないもんで、適当なクラス名を振ったUL要素でなんとかすることになる。いろいろ試したけど、P要素にA要素と矢印(もしくは、矢印に見立てたハイフン記号や不等号記号?)を放り込んで……というのは、あまり、よろしくない。

<ul class="breadcrumb">
    <li><a href="../index.html" accesskey="1">ぐらさん家のガラクタ倉庫 /Home</a> →</li>
    <li><a href="./index.html" accesskey="3">HTMLと私 /Index</a> →</li>
    <li>動かざるパンくずリストの作り方</li>
</ul>
従来型HTMLに於ける一例。

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

ともかく、この記述を、適当な場所に差し込む。

一方、HTML5には、この手のナビゲーション向けに、nav要素がありますが、さらに、それを、header要素に入れておきます。なんで、そんなめんどくせえことすんだよ、と聞かれれば、これが、うちのやり方です。

<header id="SITETOP">
  <nav class="breadcrumb">
    <ul>
      <li><a href="../index.html" accesskey="1">ぐらさん家のガラクタ倉庫 /Home</a> →</li>
      <li><a href="./index.html" accesskey="3">HTMLと私 /Index</a> →</li>
      <li>動かざるパンくずリストの作り方</li>
    </ul>
  </nav>
</header>
HTML5 に於ける一例。

CSSの部分

本題です。以下は、HTML5版のパンくずリストを元に、このページの上の方にあるパンくずリストを、ひとまずの目標、完成ということにして、作業を進めていきます。

ここでやりたいことは、たった一つ。

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

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

さっきも言ったとおり、HTML5の方の、うちのサイトの場合、どうなっているのか、ということでやっていきますんで、実際に試す場合は、ご自身の書いた解析木に合わせて、適宜セレクタ名などを読み替えてあたってください。

header#SITETOP {
    position: fixed;
    background-color: rgba(245,245,245,0.8);
    color: rgb( 36, 36, 36);
    top: 2pt;
    right: 4pt;
    border: 1pt dotted rgb(0, 64, 128);
    box-shadow: 3pt 3pt 0 rgba( 0, 64, 128, 0.5);
}

nav.breadcrumb {
    font-size: 80%;
    text-align: right;
}

nav.breadcrumb ul {
    margin: 0 1em 0 -2em;
}

nav.breadcrumb li {
    display: inline-block;
    list-style-type: none;
}

うちのCSS(一部)。

上から行こうかな。

パンくずリストの入ってるheader要素なんですが、今回やりたいことは、ほとんど、というか、全部、このセレクタに指定しています。

1行目のpositionプロパティで、位置固定。親要素のボックスの左上を基準に位置を決定しますが、僕のページの場合は、親要素に、positionプロパティを設定してないので、ブラウザの、もとい、UAの表示領域が基準になります。

2,3行目は色指定なんだけど、background-colorプロパディは、RGBaという形で、色指定+アルファチャンネル(透過具合)の設定ができます。カッコ()の中の、4つ目の数字、この例で言うと『0.8』が、その、アルファチャンネルの指定。

それから、位置(上から2pt、右から4pt)、ボーダーライン、そして、ボックスシャドウ、つまり、この、header要素というボックス要素に影をつけるという指定。

box-shadowプロパティの値は、前から2つは影のオフセット幅。前の数字が横方向。次の数字が縦方向です。両方正の値で、影が、右、下にズレ、負の値だと、それぞれ、左、上にズレます。三番目は、影の滲み幅。負の値は入れられません。それから、これに続いて、影の大きさも指定できますが、ここでは省いています。それから、影自身の色指定。rgbaを使用することで、透過度も指定できます。

続いて、その中身の、NAV要素、更に、その中のUL要素の設定。

一番下は、さらに、その中のLI要素への指定で、displayプロパティをinline-block。ナンノコッチャ。要するに、インラインレベルのプロックコンテナとして表示する。うん。イイエテミョー。いや、パッと見、インラインなんだけど、実は、ブロックコンテナを生成するんで、高さや横幅なんかも指定できるようになっている。ここではしてないですけどね。

さらに、LI要素の、先頭につけられる黒丸、白丸、その他の形のドットをつけないように、list-style-type: none;を指定、と。

完成

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

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

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