CSSでタブをつくってみる
こんにちは、HTML+CSS担当の小森です。
ウェブサービスをつくるうえで、ユーザにとってわかりやすくて、使っていて楽しい、
そんな魅力的なインタフェースをつくれたらいいですよね。
これをCSSでどう実現するか、という視点でいろいろ考えていければと思っています。
今日のお題は「タブ」です。
タブは直感的でわかりやすく、AmazonなどECサイトにも使われますよね。
グローバルナビゲーションとして、また情報ブロックの切り替えパーツとして、使いどころはたくさんある便利なヤツです。
どんなのをつくる？
ひとくちにタブといえども、いろいろなデザインがあるものです。CSS Tabs and CSS Navigation Menus Showcase (over 70 entries so far)
には美しいタブデザインがまとめられていて、参考になります。
マウスオーバー時の表現も大事です。「さわったことがわかる」「自分のアクションに対して、反応がある」ことは、ユーザにとって積極的なフィードバックなので、ぜひともhover時の設定もつけておきたいですね。
タブ画像を用意する
Photoshopなどで自由に作ってももちろんかまいませんが、Web上でタブのパーツが作れる、タブ画像ジェネレータを紹介します。 ボーダーの色・太さ、グラデーションの有無など細かい部分まで指定できるので、お好みのものを作ってみてはどうでしょう。
どうやってつくる？
Resizable tabbed navigation with CSS
Deziner Folio≫ Blog Archive ≫ Creating Liquid CSS Tabs for Menus
これらのタブはフォントサイズを変更してもきちんと拡張してくれるつくりになっている点がよいです。
それぞれチュートリアル・図解で説明してあるので、わかりやすいです。
だいたい下記のような構造でマークアップして、
CSSで li をfloat:leftさせて、横並びにして、背景画像を設定する…
ところまでは共通ですが、フォントサイズ可変にする場合は
各paddingの設定と、背景位置がキモになりますね。
その他
サブメニューがある場合のタブ表現も、CSSで。
マウスオーバーで下層メニューが出ます。
もっとお手軽な手も…
タブが簡単に作成できる「CSS Tab Designer」というソフトがあります。
これはWindows用のフリーソフトで、すでにデザインが用意されているので、インストール直後にすぐタブを作成することができます。
あれこれ悩まずに開発に時間を割きたい、なんて人にはいいかもしれません…
CSS Tab Designer
次はボタンの予定です。
最近のコメント