/ 0/0/ : 実結果 HTMLファイルを表します下図の画が表されます " 出し"の部分をクリックすると"コンテンツですよ "の字が表されますもう度 " 出し"をクリックすると"コンテンツですよ "の字が非表になります折りたたみパネルの基

Size: px

Start display at page:

Download "/ 0/0/ : 実結果 HTMLファイルを表します下図の画が表されます " 出し"の部分をクリックすると"コンテンツですよ "の字が表されますもう度 " 出し"をクリックすると"コンテンツですよ "の字が非表になります折りたたみパネルの基"

せせらかに
9 years ago
Views:

1 / 0/0/ : [CSS] 折りたたみ可能なパネルの作成 - CSSのみを利した折りたたみ領域 / アコーディオンパネルこのページのタグ:[CSS] [アコーディオンパネル] 新着記事覧タグ覧トップページ ipentec.com CSSのみを利した折りたたみ可能なパネル( 折りたたみ可能領域 )を実現するコードを紹介します概要 InputタグのCheckBoxを利しチェックがついている場合とついていない場合でパネルの折りたたみを制御します折りたたみの出し部分をInputチェックボックスのラベル部分としラベルをクリックするとチェックボックスにチェックが付く動作にしますまた Checked 疑似クラスと隣接セレクターをいてチェックボックスにチェックが付いた場合とそうでない場合でのスタイルを切り替えることでパネルの表非表を制御します最もシンプルな例コードの量を最にして最もシンプルな動作のコードを紹介しますコード以下のコードを記述します CssExpandPanel.html 0 <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-"/> <title></title> <link rel="stylesheet" type="text/css" href="cssexpandpanel.css" /> </head> <body> <label for="panel"> 見出し</label><input type="checkbox" id="panel" class="expandcheckbox" /> <div class="panel"> コンテンツですよ~ </div> </body> </html> CssExpandPanel.css 0 input[type="checkbox"].expandcheckbox { input[type="checkbox"].expandcheckbox + div.panel { input[type="checkbox"].expandcheckbox:checked + div.panel { display: block; 解説

2 / 0/0/ : 実結果 HTMLファイルを表します下図の画が表されます " 出し"の部分をクリックすると"コンテンツですよ "の字が表されますもう度 " 出し"をクリックすると"コンテンツですよ "の字が非表になります折りたたみパネルの基本的な動作が実装できました

3 / 0/0/ : 折りたたみパネルらしい外観のコード例先のシンプルなHTMLファイルのコードを修正してより折りたたみパネルらしい外観にしますコード以下のコードを記述します CssExpandPanel.html 0 <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-"/> <title></title> <link rel="stylesheet" type="text/css" href="cssexpandpanel.css" /> </head> <body> <input type="checkbox" id="panel" class="expandcheckbox" /> <label class="expandheader" for="panel"> 見出し</label> <div class="panel"> コンテンツですよ~<br /> ABCDEFG<br /> あいうえお<br /> かきくけこ<br /> </div> </body> </html> 解説 HTMLファイルにきな変更はありません INPUTタグの順番を変更し INPUT, Label, div の順番でタグを並べます CssExpandPanel.css input[type="checkbox"].expandcheckbox { input[type="checkbox"].expandcheckbox +.ExpandHeader { width:0px; background-color:#cdeff; border:solid px #00ba; input[type="checkbox"].expandcheckbox:checked +.ExpandHeader { width:0px; background-color:#cdeff; border-top:solid px #00ba; border-left:solid px #00ba; border-right:solid px #00ba; border-bottom:none; input[type="checkbox"].expandcheckbox + label + div.panel { input[type="checkbox"].expandcheckbox:checked + label + div.panel { display: block; width:0px; border-left:solid px #00ba; border-right:solid px #00ba; border-bottom:solid px #00ba; 解説 input[type="checkbox"].expandcheckbox {

4 / 0/0/ : チェックボックスは非表にします 0 0 input[type="checkbox"].expandcheckbox +.ExpandHeader { width:0px; background-color:#cdeff; border:solid px #00ba; input[type="checkbox"].expandcheckbox:checked +.ExpandHeader { width:0px; background-color:#cdeff; border-top:solid px #00ba; border-left:solid px #00ba; border-right:solid px #00ba; border-bottom:none; 上記にてヘッダ部分のスタイルを設定しますチェックボックスにチェックがついている場合といない場合のスタイルを設定しますパネルが開いた場合は下部の枠線を非表にしていますまた label 要素はインライン要素のため display:blockを追加しブロック化しています 0 input[type="checkbox"].expandcheckbox + label + div.panel { input[type="checkbox"].expandcheckbox:checked + label + div.panel { display: block; width:0px; border-left:solid px #00ba; border-right:solid px #00ba; border-bottom:solid px #00ba; 折りたたみパネル部分のスタイルを設定しますチェックボックスがついていない場合は非表にしています実結果 HTMLファイルを表します下図の画が表されます [ 出し]の部分をクリックするとコンテンツが展開され表されます

5 / 0/0/ : もう度出しの部分をクリックするとコンテンツが折りたたまれ非表になります登録 :0-0- 最終更新 :0-0- このページのタグ:[CSS] [アコーディオンパネル] この記事に関連するページ [JavaScript] JavaScriptによる折りたたみ可能なパネルの作成 - JavaScriptによるアコーディオンパネルの作成新着記事覧タグ覧トップページ ipentec.com

6 / 0/0/ : プライバシー ipentecについて ipentec all rights reserverd.

textbook.indd

textbook.indd 02 XHTML+CSS part2 CSS Topics 前回習得した基礎 CSS を元にボックス CLASS ID の概念を習得ボックスレイアウトを用いた 2 カラムのサイト構築をします An Introduction to Webdesign + XHTML/CSS Coding 18 01. XHTML+CSS 2 19 20 21 22 23 24