• 検索結果がありません。

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

N/A
N/A
Protected

Academic year: 2021

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

Copied!
6
0
0

読み込み中.... (全文を見る)

全文

(1)

[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;

(2)

実⾏結果

HTMLファイルを表⽰します。下図の画⾯が表⽰されます。

"⾒出し"の部分をクリックすると"コンテンツですよ〜"の⽂字が表⽰されます。

もう⼀度"⾒出し"をクリックすると"コンテンツですよ〜"の⽂字が非表⽰になります。

(3)

折りたたみパネルらしい外観のコード例

先のシンプルな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; }

(4)

チェックボックスは非表⽰にします。 上記にてヘッダ部分のスタイルを設定します。チェックボックスにチェックがついている場合といない場合のスタイルを設定します。 パネルが開いた場合は下部の枠線を非表⽰にしています。また、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 22

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; } 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; }

(5)

もう⼀度⾒出しの部分をクリックするとコンテンツが折りたたまれ非表⽰になります。

登録⽇ :2013-06-12 最終更新⽇ :2014-03-29

このページのタグ:[CSS] [アコーディオンパネル]

この記事に関連するページ

[JavaScript] JavaScriptによる折りたたみ可能なパネルの作成 - JavaScriptによるアコーディオンパネルの作

(6)

プライバシー iPentecについて

参照

関連したドキュメント

(a) 主催者は、以下を行う、または試みるすべての個人を失格とし、その参加を禁じる権利を留保しま す。(i)

Jabra Talk 15 SE の操作は簡単です。ボタンを押す時間の長さ により、ヘッドセットの [ 応答 / 終了 ] ボタンはさまざまな機

した標準値を表示しておりますが、食材・調理状況より誤差が生じる場合が

題が検出されると、トラブルシューティングを開始するために必要なシステム状態の情報が Dell に送 信されます。SupportAssist は、 Windows

つの表が報告されているが︑その表題を示すと次のとおりである︒ 森秀雄 ︵北海道大学 ・当時︶によって発表されている ︒そこでは ︑五

えて リア 会を設 したのです そして、 リア で 会を開 して、そこに 者を 込 ような仕 けをしました そして 会を必 開 して、オブザーバーにも必 の けをし ます

手動のレバーを押して津波がどのようにして起きるかを観察 することができます。シミュレーターの前には、 「地図で見る日本

“〇~□までの数字を表示する”というプログラムを組み、micro:bit