[CSS]CSS3のプロパティを使用した次世代のタブナビゲーション

対応ブラウザも増えたCSS3のプロパティを使用して実装するタブナビゲーションのチュートリアルをMarcofolio.netから紹介します。

Sweet tabbed navigation using CSS3
demo

使用しているCSS3のプロパティは下記のとおりです。

• rgba
• opacity
• text-shadow
• pseudo selectors
• rounded corners
• gradients
• box-shadow

画像やスクリプトを使用して同等のものを実装することは可能ですが、軽量でシンプルなコードで実装でき、変更も簡単にできるのが大きなポイントになります。

タブはリスト要素で、HTMLは下記のようになります。

HTML

<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Blog" class="active">Blog</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Register">Register</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>

正常に動作するブラウザはFirefox, Safari, Chromeの最新版となります。IE8, Opera10では期待通りの表示はされません。

Post on:2009年12月9日