デザインのみのサンプルとなります(JavaScriptは組み込まれていません)。
tab3_act_left.gif
tab3_act_right.gif
tab3_gen_left.gif
tab3_gen_right.gif
背景色は白となります。(角丸の部分は透過されていません)
※画像へは直接リンクしないでください。(ダウンロードしてから使用してください)
.example { padding: 20px 10px; background-color: #ffffff; } /* --- ボックス --- */ .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: 8em; /* タブの幅 */ margin: 0 5px -1px 0; /* タブのマージン(上右下左) */ background: url(tab3_gen_left.gif) no-repeat left top; /* タブの背景(左) */ border-bottom-style: none; text-align: center; float: left; } /* --- リンク --- */ .section .sectionNav li a { display: block; position: relative; /* IE6用 */ padding: 9px 2px 4px 2px; /* リンクエリアのパディング(上右下左) */ background: url(tab3_gen_right.gif) no-repeat right top; /* タブの背景(右) */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .section .sectionNav li a:hover { text-decoration: underline; /* テキストの下線(あり) */ } /* --- アクティブなタブ --- */ .section .sectionNav li.active { z-index: 3; background: url(tab3_act_left.gif) no-repeat left top; /* アクティブタブの背景(左) */ font-weight: bold; /* 太字 */ } .section .sectionNav li.active a { background: url(tab3_act_right.gif) no-repeat right top; /* アクティブタブの背景(右) */ 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="example"> <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> </div>