[CSS]軽快に動作するタブコンテンツを実装するスタイルシート

クロスブラウザ対応の、軽快に動作するタブコンテンツを実装するスタイルシートをCSSplayから紹介します。

デモのキャプチャ

Cross browser tabbed pages with embedded links version 2
demo

タブで表示される各パネルはリスト要素で実装されており、テキストや画像、リンク要素などを配置できます。

タブの高さは、固定タイプと可変タイプの2種類あり、固定タイプではスクロールバーで領域内に表示します。

また、デフォルトでタブ箇所のみの表示で、マウスをフォーカスするとパネルが表示されるタイプもあります。

デモのキャプチャ

Cross browser tabbed pages with embedded links
demo

対応ブラウザは、IE5.5/6/7, Fx1.0.4, Safari1.3.2, Opとのことで、IE対策として条件付きコメントを使用しています。

sponsors

top of page

©2024 coliss