第13回　リストスタイル使いこなしの総仕上げ

リストタグのナビゲーションスタイルばかり紹介し続けたせいで、すっかりリスト作りが面白くなってしまった。画像ボタンの次はやはりシンプル設計に立ち戻り、手間をかけずにすっきりスタイリッシュを目指したデザインを作ってみたい。リストスタイル使いこなしの総仕上げにもなるはずだ。

前進色である暖色のオレンジ、しかも彩度高めで強い配色を中心に添える。１色ベタ塗りのシンプルさを引き立てる意味で、地色のパターン作りには手間をかけた。テクスチャ全体からグレー30％程度の印象が出るように、強弱のあるパターンを作る。また、色帯全体に対し、文字はやや下がり気味の位置に置くことで、スラブセリフ付きのフォントが持つ安定感を強調している。

一応説明するが、HTMLの構成はほぼ前回のスタイルと変わらない。リンク設定を付けたリスト項目を並べている。現在のページに該当するラベルには、selecedというクラスを付けていることだけが相違点だ。【ソース1】を見て欲しい。

ここからが本番、「ul」のスタイル設定に入ろう。今回は「ul」のボックスサイズを任意に設定して背景画像表示領域とする。そこでまずボックスの高さと幅を決めた。次にブラウザの上部から余白を設けて、全体がちょっと下がって見えるようにする。【ソース1】を確認すると、この目的のために入れたのが「margin-top」の「30px」である。「ul」の記述の中には「li」でタグ付けした項目テキストと、「ul」ボックスの間の隙間を作るための「padding-top:30px」も必要だ。あとは背景画像の指定と、リストからビュレットを取る指定をする。背景画像は単なる網掛けでなく、２重斜線によるパターンを使った変則的なテクスチャーにして雰囲気を出してみたのが、【図1】だ。。

【ソース3】では、「li」の範囲として高さ42pxを指定する。これは「li」の中のリンク部分「li a」のスタイルにも継承される。あれ？　「padding-top」なんかはliのところに書けば良いのでは？　そう思うかもしれないが、このスタイル最大の特徴は「テキストの長さに応じて背景色の付く範囲が変わる」こと。「li」のセレクタに余白や色を設定してしまうと、「li」の仮想ボックス全体に色が反映してしまうなど、「li a」にスタイルが継承された際うまくコントロールできなくなる。

次はリンク部分のliのスタイル設定だ。「a」タグで囲んである範囲限定でスタイルを付ける。ここで先のリストボックスの高さから上部10px分中のテキストを下げる指定を付け、全体的に下付き気味にテキストをレイアウトする。ここに背景色と左サイドの余白（padding-left:10px;）を併記すると、背景色はulボックスの左端にくっつけながら、テキストだけを10px頭下げすることが可能だ。テキストの終端で背景色が唐突に切れないように（padding-right:10px;）で余裕を与えている。【ソース4】をじっくり見て欲しい。

マウスカーソルに反応した際の背景色と、「selected」のクラスの色を【ソース4】のように設定してできあがりである。

各余白設定は【図2】【図3】【図4】にまとめた。#nav ulのpadding-topは指定の値が30pxだが、フォントサイズとli aのpadding-topとの関係で10pxほど高さが削られている。今の設定ではフォントサイズが大きくなるほど背景色の及ぶ範囲は広くなる。

平坦でがんじょうな留めのデザイン（スラブ）を持つことで知られる書体がCourierだ。ヒゲのような留めを持つ明朝風のセリフ体と違い、この書体はスラブセリフ体とも呼ばれる。1955年、IBMのためにHoward G. Kettlerがデザインした。タイプライターのフォントスタイルを継承する書体だ。電報などの古い時代の打電によるコミュニケーションをほうふつとさせるために「メッセージを伝えるためのスタイル」という印象が色濃く残る。また、一般的な書体では区別しにくいLとIの小文字の区別がはっきりしているため、誤読されにくい文字としてIDやパスワードの表記にもよく使われている。