[CSS] 折りたたみ可能なパネルの作成 - CSSのみを利⽤した折りたたみ領域 / アコー
ディオンパネル
新着記事⼀覧タグ⼀覧
トップページ
iPentec.com
このページのタグ:[CSS] [アコーディオンパネル]
CSSのみを利⽤した折りたたみ可能なパネル(折りたたみ可能領域)を実現するコードを紹介します。概要
InputタグのCheckBoxを利⽤しチェックがついている場合とついていない場合でパネルの折りたたみを制御します。折りたたみの⾒ 出し部分をInputチェックボックスのラベル部分とし、ラベルをクリックするとチェックボックスにチェックが付く動作にします。 また、Checked疑似クラスと隣接セレクターを⽤いてチェックボックスにチェックが付いた場合とそうでない場合でのスタイルを切 り替えることでパネルの表⽰、非表⽰を制御します。最もシンプルな例
コードの量を最⼩にして最もシンプルな動作のコードを紹介します。コード
以下のコードを記述します。CssExpandPanel.html
CssExpandPanel.css
解説
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title>
<link rel="stylesheet" type="text/css" href="CssExpandPanel.css" /> </head>
<body>
<label for="Panel1">見出し</label><input type="checkbox" id="Panel1" class="ExpandCheckBox" /> <div class="panel">
コンテンツですよ~ </div> </body> </html> 1 2 3 4 5 6 7 8 9 10 11
input[type="checkbox"].ExpandCheckBox { display: none;
}
input[type="checkbox"].ExpandCheckBox + div.panel { display: none;
}
input[type="checkbox"].ExpandCheckBox:checked + div.panel { display: block;
実⾏結果
HTMLファイルを表⽰します。下図の画⾯が表⽰されます。
"⾒出し"の部分をクリックすると"コンテンツですよ〜"の⽂字が表⽰されます。
もう⼀度"⾒出し"をクリックすると"コンテンツですよ〜"の⽂字が非表⽰になります。
折りたたみパネルらしい外観のコード例
先のシンプルなHTMLファイルのコードを修正してより折りたたみパネルらしい外観にします。コード
以下のコードを記述します。CssExpandPanel2.html
解説HTMLファイルに⼤きな変更はありません。INPUTタグの順番を変更し、INPUT, Label, div の順番でタグを並べます。
CssExpandPanel2.css
解説 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title>
<link rel="stylesheet" type="text/css" href="CssExpandPanel2.css" /> </head>
<body>
<input type="checkbox" id="Panel1" class="ExpandCheckBox" /> <label class="ExpandHeader" for="Panel1">見出し</label> <div class="panel">
コンテンツですよ~<br /> ABCDEFG<br /> あいうえお<br /> かきくけこ<br /> </div> </body> </html> 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
input[type="checkbox"].ExpandCheckBox { display: none;
}
input[type="checkbox"].ExpandCheckBox + .ExpandHeader { width:320px;
display:block;
text-align:center; background-color:#c1deff;
border:solid 1px #0058ba; }
input[type="checkbox"].ExpandCheckBox:checked + .ExpandHeader { width:320px;
display:block;
text-align:center; background-color:#c1deff;
border-top:solid 1px #0058ba; border-left:solid 1px #0058ba; border-right:solid 1px #0058ba; border-bottom:none;
}
input[type="checkbox"].ExpandCheckBox + label + div.panel { display: none;
}
input[type="checkbox"].ExpandCheckBox:checked + label + div.panel { display: block;
width:320px;
border-left:solid 1px #0058ba; border-right:solid 1px #0058ba; border-bottom:solid 1px #0058ba; }
チェックボックスは非表⽰にします。 上記にてヘッダ部分のスタイルを設定します。チェックボックスにチェックがついている場合といない場合のスタイルを設定します。 パネルが開いた場合は下部の枠線を非表⽰にしています。また、label要素はインライン要素のため、display:blockを追加しブロック 化しています。 折りたたみパネル部分のスタイルを設定します。チェックボックスがついていない場合は非表⽰にしています。
実⾏結果
HTMLファイルを表⽰します。下図の画⾯が表⽰されます。 [⾒出し]の部分をクリックするとコンテンツが展開され表⽰されます。 2 3 display: none; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22input[type="checkbox"].ExpandCheckBox + .ExpandHeader { width:320px;
display:block;
text-align:center; background-color:#c1deff;
border:solid 1px #0058ba; }
input[type="checkbox"].ExpandCheckBox:checked + .ExpandHeader { width:320px;
display:block;
text-align:center; background-color:#c1deff;
border-top:solid 1px #0058ba; border-left:solid 1px #0058ba; border-right:solid 1px #0058ba; border-bottom:none; } 1 2 3 4 5 6 7 8 9 10 11
input[type="checkbox"].ExpandCheckBox + label + div.panel { display: none;
}
input[type="checkbox"].ExpandCheckBox:checked + label + div.panel { display: block;
width:320px;
border-left:solid 1px #0058ba; border-right:solid 1px #0058ba; border-bottom:solid 1px #0058ba; }
もう⼀度⾒出しの部分をクリックするとコンテンツが折りたたまれ非表⽰になります。
登録⽇ :2013-06-12 最終更新⽇ :2014-03-29
このページのタグ:[CSS] [アコーディオンパネル]
この記事に関連するページ
[JavaScript] JavaScriptによる折りたたみ可能なパネルの作成 - JavaScriptによるアコーディオンパネルの作
成
プライバシー iPentecについて