角丸タブを使ったタブボックスを作る

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

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

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

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

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

【この記事の目次】

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