on:2012年4月16日sponsorsJavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。CSS3[ad#ad-2]デモ実装デモデモページデモでは4種類のアニメーションが用意されています。[ad#ad-2]まずは、切り替え時にフェードのアニメーションを使ったデモから。フェード続いて、スライドのアニメーションです。スライド3つ目は切り替え時のアニメーションだけでなく、フォーカスしたタブがアニメーションであがります。タブが上へ最後はレイアウトが変わり、上下のスライドでアニメーションします。垂直型タブ実装HTMLタブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。content</p></div></div></section>CSSまずは、タブの基本スタイルです。0;」でinput要素を隠します。360px;}タブ自体はlabel要素でスタイルします。ラベルをクリックすることで、inputのチェック状態を判断します。label要素のスタイルはz-indexにそれぞれ異なる値をし、box-shadowなどでよりリアルな奥行きを与えています。1;}labelの一番最後にはbox-shadowでのスタイルは不要なので、:after擬似要素を使いクリアします。block;}タブがクリックされた際、そのlabel要素のz-indexを一番上の状態にします。