• 表示サンプル

メリットとデメリット

• HTML上では単なるリストなので検索エンジンのクローラにも優しい
• 背景画像を変更すれば様々なバリエーションのタブが作れる
• ビジターにクリックできるものと意外に認識してもらえない(汗)

HTML

　li 要素に selected クラスを与えることで、そのタブがフォーカスされた状態で表示されます。

<ul class="tabs">
  <li><a href="#"><span>Tab1</span></a></li>
  <li><a href="#"><span>Tab2</span></a></li>
  <li><a href="#"><span>Tab3</span></a></li>
  <li class="selected"><a href="#"><span>Tab4</span></a></li>
  <li><a href="#"><span>Tab5</span></a></li>
</ul>

CSS

　タブの重なりを実現するために li 要素を inline として float を指定し、margin-left でマイナス値を指定するのがミソなんだと思います。重なり順の制御には position と z-index が必要です。

ul.tabs li {
  display: inline;
}

ul.tabs li a {
  display: block;
  float: left;
  line-height: 20px;
  position: relative;
  margin-left: -6px; /*タブの重なり具合*/
  padding-right: 12px;
  background: url('tab0e.gif') right top no-repeat;
  border-bottom: solid 1px grey;
}

ul.tabs li span {
  float: left;
  display: block;
  padding-left: 15px;
  padding-right: 3px;
  background: url('tab0s.gif') left top no-repeat;
  height: 20px;
}

ul.tabs li.selected a {
  background: url('tab1e.gif') right top no-repeat;
  border-bottom: solid 1px white;
  z-index: 1;
}

ul.tabs li.selected span {
  background: url('./tab1s.gif') left top no-repeat;
  font-weight: bold;
}

背景画像

• tab0s.gif -
• tab0e.gif -
• tab1s.gif -
• tab1e.gif -