[CSS]スクリプト無しで実装する、タブUIのスタイルシート

パネルをタブで変更するUIをスタイルシートで実装するチュートリアルをCSS-Tricksから紹介します。

CSS3-Only Tabbed Area

使用しているCSSはCSS3で、デモページは対応ブラウザでご覧ください。
※キャプチャはChrome

デモページ

タブの実装は、タブがリスト要素、パネルがdiv要素で、下記のものがベースとなっています。

HTML

<div class="tabbed-area">
<ul class="tabs group">
<li><a href="#box-one">Tab 1</a></li>
<li><a href="#box-two">Tab 2</a></li>
<li><a href="#box-three">Tab 3</a></li>
</ul>
<div class="box-wrap">
<div id="box-one">
		  <!-- box two content -->
		</div>
<div id="box-two">
		  <!-- box two content -->
		</div>
<div id="box-three">
		  <!-- box two content -->
		</div>
</div>
</div>

タブのハイライト処理もCSSで行われています。
ただし、一点だけ積み残しがあり、タブの切り替えにハッシュ「#box-one」を使用しているため、ページ内アンカーが有効になってしまいます。
現時点ではページの下部に配置することで、とりあえず移動はなくなります。

Post on:2010年3月10日