/ 0/0/ : [CSS] 折 りたたみ 可 能 なパネルの 作 成 - CSSのみを 利 した 折 りたたみ 領 域 / アコー ディオンパネル このページのタグ:[CSS] [アコーディオンパネル] 新 着 記 事 覧 タグ 覧 トップページ ipentec.com CSSのみを 利 した 折 りたたみ 可 能 なパネル( 折 りたたみ 可 能 領 域 )を 実 現 するコードを 紹 介 します 概 要 InputタグのCheckBoxを 利 しチェックがついている 場 合 とついていない 場 合 でパネルの 折 りたたみを 制 御 します 折 りたたみの 出 し 部 分 をInputチェックボックスのラベル 部 分 とし ラベルをクリックするとチェックボックスにチェックが 付 く 動 作 にします また Checked 疑 似 クラスと 隣 接 セレクターを いてチェックボックスにチェックが 付 いた 場 合 とそうでない 場 合 でのスタイルを 切 り 替 えることでパネルの 表 非 表 を 制 御 します 最 もシンプルな 例 コードの 量 を 最 にして 最 もシンプルな 動 作 のコードを 紹 介 します コード 以 下 のコードを 記 述 します CssExpandPanel.html 0 <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml"> <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; 解 説
/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます " 出 し"の 部 分 をクリックすると"コンテンツですよ "の 字 が 表 されます もう 度 " 出 し"をクリックすると"コンテンツですよ "の 字 が 非 表 になります 折 りたたみパネルの 基 本 的 な 動 作 が 実 装 できました
/ 0/0/ : 折 りたたみパネルらしい 外 観 のコード 例 先 のシンプルなHTMLファイルのコードを 修 正 してより 折 りたたみパネルらしい 外 観 にします コード 以 下 のコードを 記 述 します CssExpandPanel.html 0 <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml"> <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 0 0 0 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 {
/ 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ファイルを 表 します 下 図 の 画 が 表 されます [ 出 し]の 部 分 をクリックするとコンテンツが 展 開 され 表 されます
/ 0/0/ : もう 度 出 しの 部 分 をクリックするとコンテンツが 折 りたたまれ 非 表 になります 登 録 :0-0- 最 終 更 新 :0-0- このページのタグ:[CSS] [アコーディオンパネル] この 記 事 に 関 連 するページ [JavaScript] JavaScriptによる 折 りたたみ 可 能 なパネルの 作 成 - JavaScriptによるアコーディオンパネルの 作 成 新 着 記 事 覧 タグ 覧 トップページ ipentec.com
/ 0/0/ : プライバシー ipentecについて ipentec all rights reserverd.