[CSS] スプレッドシートにあるようなタブを作る方法

Posted by
ぴろり
Posted at
2008/08/11 12:53
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
開発メモ カテゴリ
カバーイメージ
  • Tabs
  • Photo by miscellaneaarts
    • Attribution
    • NonCommercial
    • ShareAlike

 CSS を用いて Microsoft Excel などのスプレッドシートの端にあるタブ様のコントロールを表示する方法です。HTML としては単純な ul 要素を用いてリストとして記述でき、このサイトでもカテゴリの一覧(ページ右上のヤツ)に利用しています。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

メリットとデメリット

  • 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 -
この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。