第5回　タブ切り替えで快適に読めるインターフェースを作るには

見せたいもののメリハリをつけるのがコツ

「限られたスペースに複数の情報を入れたい。でも別ページにするほどでもない……」

そんなとき、タブでコンテンツを切り替えられると便利です。タブ切り替えは、Yahooのトップページで使われているように、かなり浸透してきています。

このUIを使うポイントは、以下のように重点的に見せたいコンテンツとそうでないもののメリハリをつけて使うことです。

特集などの一部のコンテンツに使う
ニュースであれば一番見せたいカテゴリーのものをはじめに見せておいて、重要度の低いものは別のタブコンテンツとする
サイドバーに置いたトピックスを、アーカイブと最新のもので分ける

また、以下のようなデメリットがあるので、UIの見栄えとのバランスを念頭に置いて使う必要があります。

ソースが1ページに書かれるため、ページを分ける場合と違ってSEO効果が薄れる場合がある
タブを移動してもページビューとしてカウントされないため、ページビューを上げたい場合に不利となる

Ajaxで待ち時間をなくして快適に

ネットワークの速度は高まってきていますが、別ページにリンクする場合、ページを切り替えるときの待ち時間が多少なりとも発生します。しかし、Ajaxのタブ型コンテンツを使えば、待ち時間をなくすことができます。ページのリロードを発生させずにフォームのpostデータを送ったり、コンテンツを切り替えるといったことが可能だからです。

タブで切り替えるUIは、単純なJavaScriptを使ってもを実現できますが、今回はフェードする動きを加えて気持ちよさを出したいため、jQueryを使ったサンプルをご紹介します。

切り替えるコンテンツを指定するには

まずは基本となる部分から見ていきましょう。

最初にgoogleapiのjQueryライブラリと、jquery.tools.min.jsを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript">
		$(function() { 
			$("#tabs").tabs("#tabPanes > div", { effect: 'fade' });
		});
	</script>

切り替わるコンテンツ部分は、下から4行目の「function」で指定しています。

効果を指定するのは下から3行目の「effect」のところ。今回は「fade」を指定しています。

一見難しいのが以下の部分です。

$("#tabs").tabs("#tabPanes > div"

これは、以下に掲載したXHTMLソース内の「id=tabs」の中の「id="tabPanes"」の中に書かれている3つの「div」の内容を切り替えられるようにしています。切り替えのコントロールはul、liのリストタグで記述します。

XHTMLソース（bodyタグ内）

<div class="wrap">
  <ul id="tabs" class="tabs">
    <li><a href="#">トピックス</a></li>
    <li><a href="#">アーカイブ</a></li>
    <li><a href="#">コメント</a></li>
  </ul>
  <div id="tabPanes" class="tabPanes">
    <div>
      <p>Ajaxの登場によって、ページのリロードを発生させずに
        フォームのpostデータを送ったり、コンテンツを切り替える
        といったことが可能になりました。
        ネットワークの速度は高まってきていますが、
        別ページにリンクする場合、ページを切り替えるときの待ち時間は多少なりとも発生します。
        そんなときに、待ち時間のないAjaxのタブ型コンテンツを使うと便利です。</p>
      <p>このUIを使うポイントは、特集などの一部のコンテンツに、効果的に使うことです。
        たとえば、ニュースであれば一番見せたいカテゴリーのものをはじめに見せておいて、
        あとは経済やスポーツなどを別のタブコンテンツとする。
        あるいは、サイドバーに置いたトピックスを、アーカイブと最新のものでタブでわけるなど。</p>
      <p>注意点は、ソースが1ページに書かれるため、ページを分ける場合と違ってSEO効果が薄れる
        場合があること、タブを移動してもページビューとしてカウントされないため、ページビューを
        上げたい場合に不利であることがあります。そこはUIとの兼ね合いを考える必要があります。</p>
    </div>
    <div>
      <p>アーカイブのテキストが入りますアーカイブのテキストが入りますアーカイブのテキストが入りますアーカイブのテキストが入りますアーカイブのテキストが入りますアーカイブのテキストが入ります</p>
    </div>
    <div>
      <p>コメントのテキストが入りますコメントのテキストが入りますコメントのテキストが入りますコメントのテキストが入りますコメントのテキストが入りますコメントのテキストが入りますコメントのテキストが入ります</p>
    </div>
  </div>
</div>

CSSでタブの詳細を指定する

CSSを切ると以下のようになります。

今回は3つのタブを用意していますが、CSSで3つともに同じwidthを指定します。

ブロックレベル要素にしてfloat:left;を指定します。

主なCSSソース

ul.tabs li {
	width:68px;
	float: left;
	margin-left: 5px;
	height:30px;
	overflow: hidden;
	/zoom:1;
}
ul.tabs li a:hover,
ul.tabs li a.current {
	font-weight: bold;
	color: #454545;
	background: url(../img/bg_tab.png) repeat-x;
	width:68px;
}

以下の2行は、IE6、7への対策のためです。