第9回 CSSでタブ型のナビゲーション - MdN Design Interactive
タブの「切り替わってる感じ」をしっかり出すなら、ナビゲーションとコンテンツの周囲にダークカラーを適用して、背景と明確に区別してしまう処理が効果的だ。この工夫のお陰で前のタブと後ろのタブの関係性も強調できる。 このレイアウトは２つの異なるタブ用画像を、ラベルの後ろに背景として読み込んで作る。他の色要素はブロックレベル要素に対する背景色やボーダーなど、編集中の画像をみると、さほど大きな違いは無いように見える。しかし、よく見ると、閲覧中のページのラベルはのっぺりした扁平な作りになっている。一方で閲覧中ではないページ用のラベルは左端に1ピクセルの、背景のダークカラーと同じ色のラインと、画像下部のグラデーションによる影を付けている。このちょっとした工夫によって、閲覧中が手前に、そうでないものが後ろにひっこんで見えるわけだ。【図1】と【図2】をよく見比べて欲しい。
CSS-Based Navigation Menus: Modern Solutions | Smashing Magazine
Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
