プログラミング

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

投稿日:

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

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

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

  • 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」の違いについて理解できましたか?
使い分けられると使いやすいページに出来そうですね。
最低限のコードにしてあるので、これを参考に自分に合ったデザインにしていってください。
それではまた。

-プログラミング

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

【Python】ログイン機能を作る「Flask-Login」④

「Flask-Login」を使って「ログイン機能を作る」【Part4】になります。今回は「ログインページ(login.html)」に入力フォームを作っていきたいと思います。「Flask-WTF」を使っ …

PHP開発環境

今回は実際にXAMPPをインストールし、PHPの開発環境を構築していきます。 XAMPPとは X:Xross-PlatformA:ApacheM:MariaDBP:PHPP:Perlそれぞれの頭文字を …

【Python】def文ってなんだ?

今回は、Pythonの「def文」について紹介していきます。 def文ってなんだ? 「def文」は「関数」を定義する際に使用する構文となります。 def文) def 関数(): 処理 ——– …

【Python】Flaskってなんだ?

Pythonのライブラリの中に「Flask」というライブラリがあります。「Flask」を使うことで、簡単に「WEBアプリケーション」を作成できるようなので試していきたいと思います。今回は、「Flask …

【Python】ログイン機能を作る「Flask-Login」⑦

「ログイン機能を作る」【Part7】。前回は「データベース」の設定を追加しました。今回は「ログイン処理」の部分を変更していこうと思います。 ログイン処理を変更しよう 「名前」に「ANDoblog」,「 …

YouTube