デザインのみのサンプルとなります(JavaScriptは組み込まれていません)。
/* --- ボックス --- */ .section { width: 600px; /* ボックスの幅 */ margin: 20px 0; /* ボックスのマージン(上下、左右) */ font-size: 80%; /* ボックスの文字サイズ */ color: #000000; /* ボックスの文字色 */ } /* --- タブエリア --- */ .section .sectionNav { width: 100%; /* タブエリアの幅 */ margin: 0; padding: 0; list-style-type: none; } .section .sectionNav li { position: relative; z-index: 1; width: 6em; /* タブの幅 */ margin: 0 5px -1px 0; /* タブのマージン(上右下左) */ background-color: #e8e8e8; /* タブの背景色 */ border: 1px #c0c0c0 solid; /* タブの枠線 */ border-bottom-style: none; text-align: center; float: left; } /* --- リンク --- */ .section .sectionNav li a { display: block; position: relative; /* IE6用 */ padding: 3px 2px; /* リンクエリアのパディング(上下、左右) */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .section .sectionNav li a:hover { text-decoration: underline; /* テキストの下線(あり) */ } /* --- アクティブなタブ --- */ .section .sectionNav li.active { z-index: 3; background-color: #ffffff; /* アクティブタブの背景色 */ font-weight: bold; /* 太字 */ } .section .sectionNav li.active a { color: #000000; /* アクティブタブの文字色 */ } /* --- ポイント時の設定 --- */ .section .sectionNav li.active a:hover { text-decoration: none; /* テキストの下線(なし) */ } /* --- 本文領域 --- */ .section .textArea { clear: left; position: relative; z-index: 2; padding: 10px; background-color: #ffffff; /* 本文領域の背景色 */ border: 1px #c0c0c0 solid; /* 本文領域の枠線 */ }
<div class="section"> <ul class="sectionNav"> <li class="active"><a href="#">タブ1</a></li> <li><a href="#">タブ2</a></li> <li><a href="#">タブ3</a></li> </ul> <div class="textArea"> <p>【ボックス1】</p> <p>ボックスの内容</p> <p>ボックスの内容</p> </div> </div> <div class="section"> <ul class="sectionNav"> <li><a href="#">タブ1</a></li> <li class="active"><a href="#">タブ2</a></li> <li><a href="#">タブ3</a></li> </ul> <div class="textArea"> <p>【ボックス2】</p> <p>ボックスの内容</p> <p>ボックスの内容</p> </div> </div>