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

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

メリットとデメリット
HTML
CSS
背景画像

表示サンプル

メリットとデメリット

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 -

コメントを投稿する

返信先
コメント	お気軽にコメントをお寄せくださいませ・コメントを投稿するにはブラウザの JavaScript を有効にしてください・入力された通りに改行位置で改行されます・HTML タグは使用できませんが、文中の URL は自動的にリンクされます・"<" は "<"、">" は ">" と書いてください　・MovableType関係の質問でテンプレートタグをそのまま書かれると見えません
名前	(匿名可/必須/公開)
メール	(匿名可/必須/非公開)
投稿確認	(必須) コメントスパム防止のため投稿前にを入力してから投稿してください。お手数ですがご協力のほど宜しくお願いいたします。

ヘッダメニュー

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

メリットとデメリット

HTML

CSS

背景画像

この記事を読んだ人はこんな記事も読んでいます

この記事のアーカイブ

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

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

コメントを投稿する

リファレンス

ブロガープロフィール

ツール

関連する商品

モバイル

ナビゲーション

記事検索

勝手におすすめ

最近のコメント/関連記事

最近の人気記事

フッタメニュー

ヘッダメニュー

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

メリットとデメリット

HTML

CSS

背景画像

この記事を読んだ人はこんな記事も読んでいます

その他の関連する記事

この記事のアーカイブ

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

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

コメントを投稿する

リファレンス

ブロガープロフィール

ツール

関連する商品

モバイル

ナビゲーション

記事検索

勝手におすすめ

最近のコメント/関連記事

最近の人気記事

フッタメニュー