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

Posted by
ぴろり
Posted at
2008/08/11 12:53
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
開発メモ カテゴリ

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

この記事をはてなブックマークに追加する この記事のはてなブックマーク数 | この記事をlivedoorクリップに追加する この記事のlivedoorクリップ数 | この記事をYahooブックマークに追加する この記事のYahoo!ブックマーク数 | この記事をdel.icio.usに追加する | Twitterにポストする

メリットとデメリット

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

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

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

背景画像

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

この記事を読んだ人はこんな記事も読んでいます 記事リコメンデーションについて

その他の関連する記事

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

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

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

コメントを投稿する

 
 (匿名可/必須/公開)
 (匿名可/必須/非公開)
 (必須)
コメントスパム防止のため投稿前に ランダムな数字 CAPTCHAについて を入力してから投稿してください。お手数ですがご協力のほど宜しくお願いいたします。