スマートフォンやタブレットPC用のWebサイトを作るときに、 場所を節約するために、コンテンツを折りたたんで表示することが度々あります、 通常は折りたたみ表示をするとき、JavaScriptなどを使って実装するのですが、 スマートフォンやタブレットPCなどではCSS3に対応しているため、 JavaScriptを使わずに、CSS3のみで折りたたみ表示を実装することができます。 参考:「『スマートフォンサイトのためのHTML5+CSS3』 エ・ビスコム・テック・ラボ著」 ↓こちらがそのデモです。 DEMO 方法 今回ポイントになるのが、擬似クラスの「:target」セレクタです。 メニュー部分に設置したリンクで指定したIDの要素に適用することができます。 メニューにIDのリンクを、折りたたむ要素の親要素に:targetをあてることで、実装していきます。 HTML <section id=
![CSS3だけで折りたたみ表示 | スターフィールド株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/8669c0235daca2648d45628abebba44e6e9e6378/height=288;version=1;width=512/http%3A%2F%2Fsterfield.co.jp%2Fadmin%2Fwp-content%2Fuploads%2F2013%2F04%2Feye_nino130424.jpg)