プログラミング

【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

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

【毎日投稿】4ヵ月達成

ブログを解説して、毎日投稿を続け「4ヵ月」を迎えました。今回は、今までの「Python」に関する記事をまとめて紹介したいと思います。 毎日投稿4ヵ月を迎えて おかげさまで4ヵ月目を迎えることができまし …

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

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

Python(パイソン)について

最近Pythonという言葉をよく耳にします。プログラミングを始めたばかりだからでしょうか。今回はPythonについて軽く触れていきます。 Pythonについて Pythonとは特徴(メリット)デメリッ …

【Python】Flask-WTFを使ってみる②

前回に引き続き、「Flask-WTF」を使っていきたいと思います。 forms.pyにコードを追記しよう 前回の記事はこちら。 【Python】Flask-WTFを使ってみる① from flask …

【Python】Flask-WTFを使ってみる①

今回は「Flask-WTF」について紹介していきます。これはFlaskでアプリを作成する際に、簡単に「フォーム(Form)」を作成できるものです。実際に試していきたいと思います。 Flask-WTFを …

YouTube