第3回　画像を使わずにつくるナビゲーションバー

解説：矢野りん

ドットパターンの合わせ技で洋服を縫いつけたミシン目のような雰囲気と裁断した布のような印象を再現してみた。布らしく見せるためのチェック柄は濃く見えすぎないように何度か調整を加えている。また、サイトIDの囲みの部分はあえてドットパターンで囲まずに、ただの矩形とすることで、ほかの部分よりもむしろ目立たせることをねらった。独特のフォルムを繰り返すとうるさくなりがちな印象の緩和にもなるだろう。

ナビゲーション用のリンクラベルはリストタグでマークアップするのが基本だ。こうしておけばスタイルが適用されない時でも、ずらりと並んだテキストがメニュー用の項目であることがリストの書式によってわかりやすくなる。ここではそのリストタグを使いながら、装飾的なナビゲーションを作ってみる。プライマリナビゲーションの部分の基本構造は以下のとおりだ。

並列列挙（unordered list）を宣言して、リストアイテムを示す「li」タグで項目名をマークアップする。このリストの固まりは整理整頓しやすいように「div」タグで囲んでおいた。サイトIDの画像を配置する囲みと、グローバルナビゲーション用の囲みも同じように「div」タグで範囲を示しておく。すべての「div」タグはさらに親の「div」タグでひとまとめにすると、【図2】のようになる。

次にプライマリナビゲーション（Pnav）とグローバルナビゲーション（Gnav）部分の背景画像を作っておく。ちょっとパンク風な装いをねらってタータンチェックをパターンに採用してみた。タータンチェックといえばスコットランドの民族服で有名な柄であり、パンクファッションで多用されるスタイルでもある。繰り返すと相当印象が濃いうえに、文字が読みにくくなるので、テキストを配置する部分は相当柄を薄くしている。作成した背景画像が【図3】だ。

布っぽく見せるために、まるで周囲をギザギザに裁断したかのようなスタイルを作ってみる。これは各ナビゲーションの「div」を囲む罫線スタイルを破線に指定し、さらに破線の色を背景と同じ黒に指定することでまるでギザギザに周囲が抜けているように見せている。【図4】のように背景をグレーに変更するとギザギザが単なる破線であることがわかるだろう。

それだけでは面白みに欠けるので、親の「div」にはヘアラインで背景色に溶けそうな控えめな破線を指定した。これがギザギザと呼応してなにかミシン目のように見えてくる。

このスタイルの囲みをページいっぱいに使ったサイトは手作り感のあるパンク風サイトに仕上がることうけあいだ。今回は縦方向のナビゲーションにしてみたが、横位置でも面白いスタイルが作れるだろう。

次回へつづく