てんぽ: 1. タブであること

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

1. タブであること

2005年06月04日(土)

今回から数回にわたって[chameleon]の解説をしてみようかと思います。気に入ったら投票してくださいね。投票は終了しました。

さて、たいていの「ブログ」ではすべてのページにナビゲーションがついていて、どこからでもいろんなページ(特定のカテゴリ/月別のアーカイブ、最近のエントリーなど)に直接移動できるようになっています。 しかしすべてのページで同じレイアウトをとる(ことが多い)ために次のような問題が生じます。

  • 今自分がどのページを見ているのかわからなくなる
  • ページ内に不必要なナビゲーションが存在する

これらの(個人的な)不満を解消するべく[chameleon]は作られました。

デザイン面ではタブ風のメニューを採用しました。タブメニューは以前から憧れていたもののひとつでしたが、 わざわざメニューをタブにする意味が薄かったのと、単にCSSの知識不足のためになかなか実現できませんでした。 「どのページを表示しているか」を示すのにタブメニューは有効だと思うので今回ついに採用することにしました。

タブメニューは単なるリンクアンカーではなく、現在のページを示すナビゲーションのような役割も果たします。またグローバルなナビゲーションはサイトデザインに一貫性と個性を与えてくれます。 このようにいいことづくめのタブメニューですが、効果的に使うには注意が必要です。

タブメニューは当然「画面の切り替え」を期待させるものなので、タブをクリックすると別窓が開いたり、メーラが起動したり、JavaScriptが動作したり、ページ内の別の場所にジャンプしたり(ページ内リンク)するのは好ましくありません。 そういったものならタブの形を模す必要はないどころかタブにするべきでないと思います(通常のリンクで十分)。

また、タブのメニューは「同じ次元」のものに限ります(というようなことを『戦うWebデザイン』で読みました)。 たとえば「5月の過去ログ」と「カテゴリ『××』の記事」を同じタブにするのはよくありません。「5月の過去ログ」と同じタブにあるべきなのは「4月の過去ログ」であり、「カテゴリ『××』の記事」と同じタブにあるべきなのは「カテゴリ『△△』の記事」です。

『戦うWebデザイン』ではタブメニューの例としてAmazonを挙げ、タブは「何が買えるか」を示す良いデザインだ(った)と述べています(後にタブには「オークション」や「ようこそ」などが加わり、タブの意味が明確でなくなった。オークションタブをクリックしても「オークションが買える」わけではない)。

[chameleon]ではタブはFC2ブログの「各モード」を示します。そして現在どのモード(トップページ、個別記事、カテゴリ別/月別アーカイブ、検索結果、コメントの編集)なのかをわかりやすくするためにモード毎にタブの色を変えてみました。 色が変わることにちなんで名前はカメレオンに決まりました([tab]という名前のテンプレはすでに登録されていたし)。

タブの色をモード毎に変えたためにタブを画像でかっこよく装飾できませんでしたが(モード毎に画像も変えれば可能だけど面倒だからやれない)、幅可変、文字サイズ可変(IEの文字のサイズ「最小」から「最大」まで問題なし)で、しかも(タブメニューに関しては)HTMLもシンプルになりました。

#19
カテゴリ:共有テンプレート
タグ[ 共有テンプレート ]

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/19-393d49bf

<<不可解です | 2. Indexページ>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。