</p></dl>全体は<dl>リストで構成しています。ボタンとなる箇所は<dt>に、アコーディオン動作で表示/非表示を切り替えるエリアは<dd>の中に記載する要素になります。<dl>はそれぞれ任意のIDを付けそのIDに対してCSS3「:target」を使ってアコーディオン動作を実装します。none;}「ACD-Open」と定義したアコーディオンアニメーション動作を「:target」となった<dl>の<dd>に対して実行させている構成になっています。アニメーション動作を実行する前は<dd>の高さを「0」に設定し非表示にしてアニメーション実行時に高さを「150px」に変化させています。簡単な指定のみで一般的なWeb上のUIをCSSのみで実装させることができる便利なものになっています。CSS3のみでアコーディオンUIが必要になった際に是非。(1)CSS(CSS3)のみでタブUIを作ってみる。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。画像を使用せずにCSSのみで作るストライプ、チェック、ボーダーなどの柄や、ボックスの角を折り曲げた様な背景エフェクト。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。