Lesson 09 シンプルで汎用性の高いパンくずリスト - Webデザイン表現&技法の新・ナビゲーション編

Webデザイン 表現&技法の 新・スタンダード

Lesson09

シンプルで汎用性の 高いパンくずリスト

制作・文

栗林宏之（ビーズスタジオ）

一般的に利用されているシンプルなパンくずリスト。 背景画像を利用することより、階層の増減があっても無駄な作業が発生しないため、汎用性が高い手法だ。

まずはWeb上で一番よく目にするであろう基本となるパンくずから。項目間の「>」の画像を制作する【1-1】。もちろん「>」としてテキストで表示することも可能だが、HTMLのソースは簡潔で見やすい状態にしておきたい。デザインも手軽に変えられるので、画像化するケースの方が多いだろう。


【1-1】もちろん「>」に限らず画像は何でもOK

パンくずを置きたい場所にリストタグを使用して設置【2-1】。CSSでは、<a>タグ内に画像を置くようにする。これによって現在地に新たにクラスを指定する必要もなくなり簡潔に記述することができる【2-2】。


【2-1】パンくずリストの場合ulよりもolの方が望ましいとされる


【2-2】

同じようにシンプルな構造で設置できる背景ありのパターンが【3-1】だ。パターンが変わる部分2箇所を画像として切り出して使用する【3-2】。矢印にあたる画像が2種類になるので、現在地に表示する部分のクラス名に"location"を指定する【3-3】。


【3-1】もちろん「>」に限らず画像は何でもOK


【3-2】囲みの部分を書き出す


【3-3】

<li>に対してCSSで指定をした後、デザインの変わるクラス名"location"にも背景画像・背景色・テキスト色等を指定する。これで、リンクのある部分の増減にも対応したパンくずリストになる【4-1】。


【4-1】