
今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。
この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。
表示⇔非表示を切り替える仕組み
ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。
inputタグに連動させて切り替え
まず「inputタグ」と「ラベル」「中身を隠しておく要素」を並べて配置します。
inputにチェックが入ると、直後の隠し要素が表示されるように、ちょっとした工夫をします。
CSSのセレクタ「~」を活用
CSSのセレクタ~
を使うと「ある要素の後に続く要素」に対して、スタイルを指定することができます(同じ階層にある要素に限ります)。
◯ ~ △ {スタイル指定} ◯の後に続く△にのみスタイル指定が適用される
つまりinput:checked ~ div
と書けば「チェックの入ったinputタグの後ろにあるdiv」に対してスタイルが指定できるようになります。
これを活かして、divタグをはじめは非表示にしておき、inputにチェックが入ると直後のdivタグが表示されるようになる…というようにスタイル指定すれば良いのです。

セレクタについては下の記事で解説しています。
表示・非表示を切り替えるボタンサンプル
ではここから具体的なコードサンプルを紹介していきます。まずは以下のような表示・非表示の切替ボタンを作ります。
もちろん画像の代わりに文章を入れることも可能です。
<div class="hidden_box"> <label for="label1">クリックして表示</label> <input type="checkbox" id="label1"/> <div class="hidden_show"> <!--非表示ここから--> <p><img src="face.png"></p> <!--ここまで--> </div> </div>CSS
/*全体*/
.hidden_box {
margin: 2em 0;/*前後の余白*/
padding: 0;
}
/*ボタン装飾*/
.hidden_box label {
padding: 15px;
font-weight: bold;
border: solid 2px black;
cursor :pointer;
}
/*ボタンホバー時*/
.hidden_box label:hover {
background: #efefef;
}
/*チェックは見えなくする*/
.hidden_box input {
display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
padding: 10px 0;
height: auto;
opacity: 1;
}
HTMLの解説
HTMLの<!--非表示ここから-->
〜<!--ここまで-->
の中に書いたものがクリックで表示・非表示の切り替え対象になります。この中に画像なり、文章なり隠しておきたいものを入れましょう。
一方、切替ボタンとなるのはlabel
タグの部分です。「クリックして表示」というボタンテキストは自由に変えてくださいませ。
1ページに複数のボタンを使うときにはidを変える
1ページに隠しボタンを2つ以上設置するときには、以下のようにlabel for="◯◯"
とid for="◯◯"
を別の名前に変えましょう。
<div class="hidden_box">
<label for="label2">クリックして表示</label>
<input type="checkbox" id="label2"/>
<div class="hidden_show">
<!--非表示ここから-->
<p><img src="face.png"></p>
<!--ここまで-->
</div>
</div>
名前は何でも良いのですが、分かりやすく2つめのボタンはlabel for="label2"
とid="label2"
に、
3つめのボタンはlabel for="label3"
とid="label3"
に、というように、ボタンの設置数分に合わせてlabel◯の数字を変えれば良いかと思います。

ちょっと面倒ですが、これを忘れると2つ目のボタンをクリックすると、1つめに隠していたものが表示される…なんてことになってしまいます。
CSSの解説
ボタンの装飾
.hidden_box label {~}/*ボタンの装飾*/
.hidden_box label:hover {~}/*ホバー時の装飾*/
ボタンの装飾はlabel
に対して行います。お好みでデザインを変えましょう。下の記事でボタンのデザインをたくさん紹介しています。
気に入ったデザインがあれば、セレクタだけ.hidden_box label{スタイル指定}
というように変えて使うことができます。
表示・非表示の切り替え
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
まず、divタグ(.hidden_show
)を非表示にしておきます。display:none
を使えば1発なのですが(参考:CSSのdisplay)、表示されるときにヌルっと感を出すためにゴニョゴニョとやっています。
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
padding: 10px 0;
height: auto;
opacity: 1;
}
そして、inputにチェックが入った場合、その直後にあるdivタグ(.hidden_show
)に対してスタイル指定をします。具体的には隠すための指定を取り消しています。
Webアイコンを使う例(クリックで切り替え)
ちょっとした応用編です。Webアイコンフォントを表示させ、クリックでアイコンが切り替わるようにしてみましょう。アイコンはFontAwesomeを使って表示させます。
このようなものを作ります。せっかくなので、切り替わると同時にアイコンを一周回転させています。
サンプルを見る
<div class="hidden_box"> <input type="checkbox" id="label1" /> <label for="label1">クリック</label> <div class="hidden_show"> <!--非表示ここから--> <p>こんにちは</p> <!--ここまで--> </div> </div>CSS
/*全体*/ .hidden_box { margin: 2em 0; padding: 0; } /*ボタン装飾*/ .hidden_box label { padding: 15px; font-weight: bold; background: #efefef; border-radius: 5px; cursor :pointer; transition: .5s; } /*アイコンを表示*/ .hidden_box label:before { display: inline-block; content: '\f078'; font-family: 'FontAwesome'; padding-right: 5px; transition: 0.2s; } /*ボタンホバー時*/ .hidden_box label:hover { background: silver; } /*アイコンを切り替え*/ .hidden_box input:checked ~ label:before { content: '\f00d'; -webkit-transform: rotate(360deg); transform: rotate(360deg); color: #668ad8; } /*チェックは見えなくする*/ .hidden_box input { display: none; } /*中身を非表示にしておく*/ .hidden_box .hidden_show { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s; } /*クリックで中身表示*/ .hidden_box input:checked ~ .hidden_show { padding: 10px 0; height: auto; opacity: 1; }
以下CSSの解説
アイコンは疑似要素で表示
.hidden_box label:before {
display: inline-block;
content: '\f078';
font-family: 'FontAwesome';
padding-right: 5px;
transition: 0.2s;
}
アイコンはlabel
に対して、疑似要素:before
で表示させています。疑似要素って何?という方はこちらをどうぞ。
inputにチェックが入ると、label:beforeを変更
.hidden_box input:checked ~ label:before {
content: '\f00d';/*別のアイコンに*/
-webkit-transform: rotate(360deg);
transform: rotate(360deg);/*1回転*/
color: #668ad8;
}
inputにチェックが入ると、その直後のlabel:before
のアイコンを変えるようにしています(~
のセレクタを使えば、ある要素の直後の要素に対して、スタイル指定できるんでしたね)。そのために、HTMLではinput
⇒label
⇒div
という順に並べています。

ついでにtransform: rotate(360deg)
で切替時にアイコンを360度回転させています。
inputにチェックが入ると、divを表示
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {~}
こちらは先程と同じ仕組みですね。チェックが入っているinputの後にあるdiv(.hidden_show
)に対してCSSを指定しています。