HTMLとCSSだけ！要素の表示・非表示を切り替える方法

cssだけで表示・非表示を切り替え

今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavascriptやjQueryは使わないので、AMP対応している場合にも利用できます。

サンプルボタン

この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。

表示⇔非表示を切り替える仕組み

ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。

inputタグに連動させて切り替え

ラベルは非表示にしておく

まず「inputタグ＋ラベル」と、中身を隠しておく要素を並べて配置します。

チェックが入るとラベルの中身を表示

inputにチェックが入ると、直後の隠し要素が表示されるように、ちょっとした工夫をします。

CSSのセレクタ「+」を活用

CSSのセレクタ+を使うと「ある要素のすぐ直後にある要素」に対して、スタイルを指定することができます。

◯ + △ {スタイル指定} ◯の直後にある△にのみスタイル指定が適用される

つまりinput:checkd + divと書けば「チェックの入ったinputタグの、すぐ直後にあるdiv」に対してスタイルが指定できるようになります。

セレクタ＋を使って中身を表示

これを活かして、divタグをはじめは非表示にしておき、inputにチェックが入ると直後のdivタグが表示されるようになる…というようにスタイル指定すれば良いのです。

サルワカくんの顔（通常）
サルワカくん

セレクタについては下の記事で解説しています。

CSSのセレクタとは？覚えておきたい25種類と書き方

CSSのセレクタとは？覚えておきたい25種類と書き方

表示・非表示を切り替えるボタンサンプル

ではここから具体的なコードサンプルを紹介していきます。まずは以下のような表示・非表示の切替ボタンを作ります。

サルワカくんの顔（怒）

もちろん画像の代わりに文章を入れることも可能です。

HTML 
<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に対して行います。お好みでデザインを変えましょう。下の記事でボタンのデザインをたくさん紹介しています。

CSSで作る！押したくなるボタンデザイン100（Web用）

CSSで作る！押したくなるボタンデザイン100（Web用）

気に入ったデザインがあれば、セレクタだけ.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（.cssacc）にチェックが入った場合、その直後にあるdivタグ（.hidden_show）に対してスタイル指定をします。具体的には隠すための指定を取り消しています。

Webアイコンを使う例（クリックで切り替え）

ちょっとした応用編です。Webアイコンフォントを表示させ、クリックでアイコンが切り替わるようにしてみましょう。アイコンはFontAwesomeを使って表示させます。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

アイコン切り替えのイメージ

このようなものを作ります。せっかくなので、切り替わると同時にアイコンを一周回転させています。
サンプルを見る

HTML 
<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';
     -ms-transform: rotate(360deg);
     -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 + label + .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で表示させています。疑似要素って何？という方はこちらをどうぞ。

CSSの疑似要素とは？beforeとafterの使い方まとめ

CSSの疑似要素とは？beforeとafterの使い方まとめ

inputにチェックが入ると、label:beforeを変更

.hidden_box input:checked + label:before { content: '\f00d';/*別のアイコンに*/ -ms-transform: rotate(360deg); -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 + label + .hidden_show {~}

「input」と「div（.hidden_show）」の間に「label」タグが入ってしまっているため、セレクタを間接的にしています。つまり、input:checkedの直後にあるlabelの直後にある.hidden_showというようにlabelを挟んで間接的にinputのチェックと、divタグの表示を連動させています。

サルワカ