【HTML】表示・非表示切り替えスイッチ

投稿日：2020年10月24日

WEBページを作ってる上で「初めのうちは非表示にしておきたい。」と思ったときに、便利なのが「表示と非表示を切り替えられるスイッチ」です。
自分はページのデザイン的に、非表示にしておいた方がスリムだな。と思うので活用しています。
今回は、HTMLとCSSだけで出来る「切り替えスイッチ」を紹介します。

表示・非表示切り替えスイッチ作成

「非表示」にする方法としては２つあります。

displayプロパティ
非表示にした部分の空いた隙間を詰める
ユーザーの選択に応じて、不要な項目を消していく場合に使用する
visibilityプロパティ
非表示にした部分の隙間を保持する
レイアウトを崩したくない場合に使用する

非表示にした際に消えた空間を詰めるか、詰めないかの違いです。
使用例を紹介しましたが、参考にしてみてください。

コードを真似しよう

HTML

<html>
  <head>
    <link rel="stylesheet" href="***.css">

  </head>
  <body>
    
  <input type="checkbox">←切り替え</input>
    <div class="hidden">
      
      <p>ANDoblog</p>
      
    </div>
  </body>
</html>

これがベースになります。
CSSで表示・非表示を切り替えられるようにしていきましょう。

CSS

「非表示」のものを「スイッチを押す」ことで「表示」にしたいので、まずは隠したいものを「非表示」として記述すればいいですね。

displayプロパティVer

↓まずここで非表示にしていますね。
.hidden {
  display: none;
}

↓チェックボックスにチェックがつくことで表示されます。
input:checked ~ .hidden {
  display: block;
}

「ANDoblog」が非表示になると「HELLO」が上に詰まりましたね。
では「visibilityプロパティ」はどうでしょうか。

visibilityプロパティVer


.hidden {
  visibility: hidden;
}

input:checked ~ .hidden {
  visibility: visible;
}

「ANDoblog」が非表示になっても「HELLO」はその位置をキープしているのが分かります。

まとめ

「display」と「visibility」の違いについて理解できましたか？
使い分けられると使いやすいページに出来そうですね。
最低限のコードにしてあるので、これを参考に自分に合ったデザインにしていってください。
それではまた。

執筆者：ANDo