Blog

CSS3だけで折りたたみ表示

2013.04.24Cat:css3 html5 デザイナー

スマートフォンやタブレットPC用のWebサイトを作るときに、
場所を節約するために、コンテンツを折りたたんで表示することが度々あります、

通常は折りたたみ表示をするとき、JavaScriptなどを使って実装するのですが、
スマートフォンやタブレットPCなどではCSS3に対応しているため、
JavaScriptを使わずに、CSS3のみ折りたたみ表示を実装することができます。

参考:「『スマートフォンサイトのためのHTML5+CSS3』 エ・ビスコム・テック・ラボ著」

↓こちらがそのデモです。

DEMO

 

 方法

今回ポイントになるのが、擬似クラスの「:target」セレクタです。

メニュー部分に設置したリンクで指定したIDの要素に適用することができます。

メニューにIDのリンクを、折りたたむ要素の親要素に:targetをあてることで、実装していきます。

 

HTML

今回はh2要素をメニューに、その親要素にターゲットのIDをつけます。

実際に折りたたむのは、h2の隣のdiv要素にします。

 

CSS

transitionによるアニメーションをいれたかったので、 折りたたむ要素の高さを変化させることで、折りたたむことにしました。アニメーションが必要ない場合は、通常をdisplayのnoneに、ターゲットになっているときをdisplayのblockに指定することでも折りたたみを実装できます。

今回はh2の背景画像(マーク)と角丸の形状も変化させるので、こちらも:targetを使って指定します。

CSS

 

javascriptが無効な環境で、折りたたみ表示を実装するのに役立つ方法です。

ページ内リンクを利用するので、

ずっと折りたたみの動作を繰り返していると、戻るボタンが大変なことになりますが、

そういったことに配慮が必要ない場合は、簡単に設置できるので、

実用でも利用できそうです。

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ