HTMLで表示と非表示の切り替えをクリックでできる要素を作る

HTMLで表示と非表示の切り替えをクリックでできる要素を作る

HTMLで表示と非表示の切り替えをできるように要素を組み立て、チェックボックスと連動するボタンをクリックしたら、組み立てた中の要素で文字や画像が表示と非表示に切り替わる、折りたたみが可能なデザインができる要素作りをしました。

表示と非表示の切り替え自体はCSSを使用しますが、最終的に表示と非表示の切り替をできるようにする要素をアコーディオンメニューにしたいため、要素をHTMLで組み立てる勉強をしました。

 

HTMLで表示と非表示の切り替えに必要な要素

 

HTMLで表示と非表示の切り替えに必要な要素は3つです。

 

  • クリックして表示と非表示の切り替えをするボタンになる要素
  • 表示と非表示の切り替えをするボタンと連動するチェックボックスの要素
  • 非表示の状態を表示に切り替えたときに開く文字や画像の要素

 

上記の3つの要素に必要なHTMLのタグでマークアップした子要素を、親要素で囲むことで、HTMLで表示と非表示の切り替をできるようにする一つの要素にすることができます。

 

<div class="menu">
    <label for="change01">button1</label>
    <input type="checkbox" id="change01" class="accordion" />
    <ul id="links01">
        <li>menu-one</li>
        <li>memnu-two</li>
        <li>menu-three</li>
        <li>menu-four</li>
    </ul>
</div>
Advertisement

上のHTMLが表示と非表示の切り替えに必要な要素を親要素でまとめて完成させたものです。要素の組み立てを上から順番に仕組みなども含めて覚えられるように進めていきます。

 

表示と非表示の切り替えをするlabel要素を作る

 

HTMLで表示と非表示の切り替えができるようにするためには、まずHTMLタグの<label></label>タグを使用して要素を作ります。

 

<div class="menu">
    <label for="change01">button1</label>
</div>

 

<label>開始タグにfor属性を指定し、for属性の値に属性値も指定します。このときの属性値は任意で決めて指定します。

 

 

<label></label>タグは、クリックして開く要素の表示と非表示の切り替えをするボタンの役割になる部分です。

label要素を作るときには、必ずfor属性とfor属性の値の指定をすることを忘れないでください。

 

表示と非表示のスイッチ部分にするinput要素を作る

 

ボタンをクリックしたときに、表示と非表示のスイッチ部分にする要素をlabel要素の下に作ります。使用するHTMLのタグは<input>タグです。

 

<div class="menu">
    <label for="change01">button1</label>
    <input type="checkbox" id="change01" class="accordion" />
</div>

 

<input type=”checkbox” id=”change”>

終了タグが必要ない<input>タグは、type属性を記述してtype属性の属性値を”checkbox”と指定します。この指定がチェックボックスを表示してくれます。

そしてidも指定します。このときに指定するidの値には、<label>開始タグで指定したfor属性の値と同じにします。上記のHTMLの場合はlabel側のfor=”change01”と、input側のid=”change01”のことです。

 

 

ここまでHTMLでマークアップした要素は、ボタンになる文字とinputタグで作ったチェックボックスが表示できます。

Advertisement

ここでlabelのforとinputのidの値を同じにしている意味が理解しやすくなります。

inputタグだけで表示したチェックボックスは、チェックボックスにチェックを入れないとチェックが入りません。

ですがlabelのforとinputのidの値を同じにすることで、labelで作成したボタンをクリックしても、チェックボックスと連動できているため、チェックしたり外したりが可能な仕組みを作れているのが理解できるかと思います。

 

クリックして文字表示する要素を作る

 

チェックボックスに連動するボタンをクリックしたら要素が開き表示され、もう一度ボタンをクリックすると要素が閉じて非表示に切り替わる要素を作成します。

先にマークアップした<label></label>要素と<input>タグを記述した下に記述します。

 

<div class="menu">
    <label for="change01">button1</label>
    <input type="checkbox" id="change01" class="accordion" />
    <ul id="links01">
        <li>menu-one</li>
        <li>memnu-two</li>
        <li>menu-three</li>
        <li>menu-four</li>
    </ul>
</div>

 

HTMLの<ul>と<li>のリストタグでリスト形式にした文字表示にしてもいいですし、<p>タグでマークアップして文字表示をしても問題ないので、それぞれチェックボックスのボタンをクリックして表示する文字をマークアップします。

 

 

HTMLで表示と非表示のスイッチとボタン、そして非表示の状態からボタンをクリックして文字表示する要素の作成を完成させると、上の画像のようにHTMLが表示できます。

 

 

そしてマークアップした要素全体に、CSSでスタイルを適用していくと上の画像のようにデザインすることができます。

上の画像を見て気づいたと思いますが、button(黒色部分)が2つあります。これは、もう一つ同じくlabelとinputのセットで作成した要素をマークアップしています。

button1とは別にbutton2をクリックすると二個目の要素も表示と非表示に切り替えられるようにHTMLに組み立てています。二個目を増やし複数の要素にする場合を次から説明します。

 

表示と非表示の切り替えができる複数の要素にする

 

HTMLで表示と非表示の切り替えができる要素を複数にする場合には、はじめに作成したHTMLコードをコピーして親要素の終了タグの上に貼り付け追加します。

そしてlabelのforの値と、inputのidを変更します。下のHTMLを見ると分かりやすいかと思います。

 

<div class="menu">
    <!-- 1start -->
    <label for="change01">button1</label>
    <input type="checkbox" id="change01" class="accordion" />
    <ul id="links01">
        <li>menu-one</li>
        <li>memnu-two</li>
        <li>menu-three</li>
        <li>menu-four</li>
    </ul>
    <!-- 1end -->
    <!-- 2start -->
    <label for="change02">button2</label>
    <input type="checkbox" id="change02" class="accordion" />
    <ul id="links02">
        <li>menu-one</li>
        <li>menu-two</li>
        <li>menu-three</li>
        <li>menu-four</li>
    </ul>
    <!-- 2end -->
</div>

 

<!– 1start –>から<!– 1end –>の中のlabelとinputにはchange01の値を指定して、change01の指定がある要素用の値をセットしてます。

一方で<!– 2start –>から<!– 2end –>の中の要素のlabelとinputの値にはchange02を指定してchange02用に指定しています。

このようにlabelとinputの値は、それぞれ各要素に指定するためだけの一つのセットにする必要があります。

全て同じ値にしてしまうと、クリックして表示と非表示の切り替えをする動作がおかしくなってしまうので、複数にするときは間違えないように注意が必要です。

 

CSSで折りたたみのデザインにしたサンプル

 

HTMLで表示と非表示の切り替えをクリックでできる要素を作成しましたが、例えば作成したHTMLにCSSでスタイルを適用していくと、折りたたみが可能なアコーディオンメニューをデザインすることができます。

以下のCode Penでボタンをクリックすると表示と非表示の切り替えができ、折りたたみのデザインが確認できます。(スマホの方は「Result」タップでデザイン確認できます。)

 

See the Pen
xxGRZKO
by @shu (@-shu-)
on CodePen.

 

HTMLだけで表示しているinputタグのチェックボックスをCSSのdisplay:noneで非表示にしたり、labe要素をクリックして表示と非表示に切り替えができるCSSの擬似クラス「:checked」などを使いながらデザインしていきます。

表示と非表示の切り替えをクリックでできるようにしたい目的は人それぞれなので、軽いサンプル程度の参考になればと思います。

また、今回のようにHTMLの<label>と<input>を使う方法では、画像をクリックして表示切り替えすることもできます。興味がある方はラジオボタンの画像をクリックして表示切り替えをする練習を読んで見てください。

HTMLカテゴリの最新記事