プログラミング学習

【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」を使っ …

【Python】Jupyterで「.py」を実行するには?

「Jupyter Notebook」で「.py」を開くとテキストファイルとして読み込まれます。では「.py」を実行するにはどうしたらいいのでしょうか。実際に自分が使っている方法を紹介します。 Jupy …

【Python】SQLAlchemyを使ってみよう

前回「SQLAlchemy」について紹介したので、今回は実際に使ってみたいと思います。 SQLAlchmyを使ってみよう では「SQLAlchemy」を使っていきましょう。「SQLAlchemy」につ …

【Python】CSVからグラフを作成してみよう

前回は、「CSVファイル」を「pandas」で読み込んで、表示しました。今回は、読み込んだ「CSVファイル」でグラフを作成したいと思います。 CSVファイルからグラフを作成しよう 「pandas」で読 …

【Python】Flask-WTFを使ってみよう④

前回は「文字数」の「バリデーション」を設定しました。今回は「パスワード」の方を設定していきます。 パスワードの設定をしてみよう 前回の記事はこちら。 【Python】Flask-WTFを使ってみよう③ …