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

Post on:2009年2月20日

sponsors

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

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

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

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

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