</p></div><!--/contents03--></div><!--/switch_area--></div><!--/tabarea-->タブボタン部分は<ul>のリストで、クリック後に表示するコンテンツ要素は通常の<div>で切り分けてあります。リストをクリックすることで、表示コンテンツ<div>に付けているIDに対してCSS3「:target」を使って表示/非表示を切り替えています。今回は「非表示」の要素に対して「:not(:target)」を使って制御をかけています。「:target」となっていない<div>に対しては「:not(:target)」プロパティで「TabRemove」定義のアニメーション動作を実行させています。(ちょっと作りが粗いところもあったり...)「:target」と「:not(:target)」を組み合わせることでCSS3でまた違った演出を組み込めるようになりそうです。CSS3のみでタブUIが必要になった際に是非。(1)CSS(CSS3)のみでタブUI(ボタンアクティブ付き)を実装する方法。今年始めに紹介した、CSSのみでタブUIを作成する方法「CSS(CSS3)のみでタブUIを作ってみる。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。PreviousPostHTML5とCSS3の参考になるショーケースまとめ。PAGETOPCSS(CSS3)のみでタブUIを作ってみる。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。