CSS3だけで折りたたみ表示
スマートフォンやタブレットPC用のWebサイトを作るときに、
場所を節約するために、コンテンツを折りたたんで表示することが度々あります、
通常は折りたたみ表示をするとき、JavaScriptなどを使って実装するのですが、
スマートフォンやタブレットPCなどではCSS3に対応しているため、
JavaScriptを使わずに、CSS3のみで折りたたみ表示を実装することができます。
参考：「『スマートフォンサイトのためのHTML5+CSS3』 エ・ビスコム・テック・ラボ著」
↓こちらがそのデモです。
方法
今回ポイントになるのが、擬似クラスの「:target」セレクタです。
メニュー部分に設置したリンクで指定したIDの要素に適用することができます。
メニューにIDのリンクを、折りたたむ要素の親要素に:targetをあてることで、実装していきます。
HTML
|
1 2 3 4 5 6 7 8 | <section id="figure01" class="figure"> <a href="#figure01"><h2>家の写真</h2></a> <div> <figure><img src="images/img01.jpg"></figure> <figcaption>テキストテキストテキストテキストテキスト。<br> テキストテキストテキストテキストテキストテキスト。</figcaption> </div> </section> |
今回はh2要素をメニューに、その親要素にターゲットのIDをつけます。
実際に折りたたむのは、h2の隣のdiv要素にします。
CSS
|
1 2 3 4 5 6 7 8 9 10 | .figure div{ height: 0; overflow: hidden; transition: height .2s; -webkit-transition: height .2s; -moz-transition: height .2s; } .figure:target div{ height: 217px; } |
transitionによるアニメーションをいれたかったので、 折りたたむ要素の高さを変化させることで、折りたたむことにしました。アニメーションが必要ない場合は、通常をdisplayのnoneに、ターゲットになっているときをdisplayのblockに指定することでも折りたたみを実装できます。
今回はh2の背景画像（マーク）と角丸の形状も変化させるので、こちらも:targetを使って指定します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | .figure h2{ height: 40px; line-height: 40px; font-size: 24px; background-image: url(images/mark_down.png), linear-gradient(top, #6ba3ce, #4b77a3); background-image: url(images/mark_down.png), -webkit-gradient(linear, left top, left bottom, from(#6ba3ce), to(#4b77a3)); background-image: url(images/mark_down.png), -moz-linear-gradient(top, #6ba3ce, #4b77a3); background-image: url(images/mark_down.png), -o-linear-gradient(top, #6ba3ce, #4b77a3); background-image: url(images/mark_down.png), -ms-linear-gradient(top, #6ba3ce, #4b77a3); background-repeat: no-repeat, no-repeat; background-size: 20px 20px, auto; background-position: left 10px center, left top; padding-left: 40px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25); -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25); margin-bottom: 0; transition: border-radius .2s; -webkit-transition: -webkit-border-radius .2s; -moz-transition: -moz-border-radius .2s; } .figure:target h2{ background-image: url(images/mark_right.png), linear-gradient(top, #6ba3ce, #4b77a3); background-image: url(images/mark_right.png), -webkit-gradient(linear, left top, left bottom, from(#6ba3ce), to(#4b77a3)); background-image: url(images/mark_right.png), -moz-linear-gradient(top, #6ba3ce, #4b77a3); background-image: url(images/mark_right.png), -o-linear-gradient(top, #6ba3ce, #4b77a3); background-image: url(images/mark_right.png), -ms-linear-gradient(top, #6ba3ce, #4b77a3); border-radius: 20px 20px 4px 4px; -webkit-border-radius: 20px 20px 4px 4px; -moz-border-radius: 20px 20px 4px 4px; margin-bottom: 10px; } |
javascriptが無効な環境で、折りたたみ表示を実装するのに役立つ方法です。
ページ内リンクを利用するので、
ずっと折りたたみの動作を繰り返していると、戻るボタンが大変なことになりますが、
そういったことに配慮が必要ない場合は、簡単に設置できるので、
実用でも利用できそうです。
Author Profile
SHARE
