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