【初心者向け】要素の表示・非表示を切り替えるvisibility、hidden要素を紹介
「webサイト上で作った要素の表示・非表示を設定したい」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- html, cssで要素の表示・非表示の使い方が分かる
本記事をお読みいただいている方は、少しずつプログラミングに慣れてきて一歩次のレベルに進もうとされている方だと思います。是非本記事をお読みいただき理解を深めてください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
visibilityプロパティ、hiddenとは
要素の表示や非表示を設定するには、visibilityプロパティとhiddenプロパティの理解が欠かせないので、1つずつ簡潔に説明していきます。
visibilityプロパティとは
visibilityプロパティは、ボックスの表示・非表示を指定する際に使用します。非表示にした場合でも、作成したボックスそれ自体が無くなってしまうわけではありませんし、表示・非表示を切り替えてもページのレイアウト自体は変わりません。
あくまで、作った要素は残したままでそれをwebサイト上でユーザに見せるか見せないかを切り替えられる点がvisibilityプロパティの優れた点だと言えます。
hiddenとは
hiddenは、先ほどのvisibilityプロパティで要素を残したままで非表示にしたい場合に使用します。文字だけの説明だと分かりづらいと思うので、実際に次の章でコードを見ていきましょう。
実際に書いてみよう
それでは、実際にコードを見ていきましょう。
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="samplecode.css" type="text/css">
</head>
<body>
<p>
<img src="images1.png" class="sample1">
<img src="images2.png" class="sample2">
</p>
</body>
</html>
.sample1 {visibility: hidden;}
.sample2 {visibility: visible;}
いかがでしょうか。上記の例では、HTML上でimages1.pngとimages2.pngをsample1、sample2のclass名として設定します。
そのclassに対してcssでvisibilityプロパティを使って、sample1のclassは「hidden」で隠し、sample2のclassは「visible」で表示しているというわけです。
大切なことは、sample1のclass（=images1.png）は非表示にしているだけで、class自体は裏で残っているという点です。
このように、1度要素としては設定しておいて、非表示にしたいタイミングに自由に切り替えられるのがvisibilityプロパティの良い点です。
まとめ
いかがでしたでしょうか。要素が不要になった時に削除するわけではなく、いずれまた表示したくなった時のことを考えて表示・非表示を切り替えられるvisibilityプロパティは非常に便利なことがお分かりいただけたと思います。
是非本記事の内容を活用して、ユーザにとってわかりやすいサイト設計を進めてください。
