プログラミング

【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】SQLAlchemyってなんだ?

「Flask」で掲示板を作るにあたって、「データベース」について調べていると「SQLAlchmy」というライブラリがあることを知りました。一般的には「ORM」というものらしいです。今回は、そんな「SQ …

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

「ログイン機能を作る Part2」をやっていこうと思います。今回は「flask_login」で使うページ(テンプレート)の実装をやっていきます。 「flask_login」を使ってみよう ではまずイン …

【Python】データベースを使ってみよう

前回「データベース」を操作するための言語が「SQL」だということを学びました。今回は「python」のライブラリにある「SQLite」を使って「データベース」を実際に触ってみたいと思います。 Pyth …

【Excel VBA】ユーザーフォームを使ってみよう1

Excel VBAで使える「ユーザーフォーム」を使っていきたいと思います。この記事では「ユーザーフォーム」の挿入と表示までやっていきます。 Excel VBAとは? VBAでお仕事効率化 VBAの開き …

YouTube