過去2回に渡って、「ページ移動せずに内容を変更するタブ機能(タブボックス)を作る」方法と、 「角の丸いタブを作る」方法をご紹介いたしました。 そこで今回はそれらを合わせて、下記のように上部の角を丸くした(タブらしく見える)タブを使ってタブボックスを作ってみましょう。

上記はタブが3つあるサンプルです。それぞれのタブをクリックしてみて下さい。クリックするとすぐに表示内容が変化します。
※JavaScriptが有効な環境でのみ機能します。(JavaScriptが無効だと、すべてのタブの内容が最初から表示されます。)

今回は、上記のように「角を丸くしたタブ」を使って、「ページ移動せずに表示内容を変更できるタブボックス」を作る方法をご紹介いたします。
この記事は、下記の2つの記事を既に読まれていることを前提にしていますので、未読の場合は先にそちらをご参照下さい。

  1. ページ移動せずに内容を変更するタブを作る」(2008/08/02公開)
  2. 角の丸い「タブ」を作る」(2008/08/12公開)

基本的なソースについては上記の2記事で既に説明していますので、それらの解説は本記事中では省略しています。
それでは、これを実現するソースを見ていきましょう。

【この記事の目次】

1. HTMLを修正する (Page.2)
2. スタイルシートを修正・追記する (Page.3)
3. 今回のソースのまとめ (Page.4)