特定箇所の表示・非表示を切り替える

JavaScriptを使ってスタイルを変化させれば、ある部分（要素）の［表示／非表示］状態を簡単に切り替えることができます。その方法には、『visibilityプロパティの値を切り替える方法』と『displayプロパティの値を切り替える方法』の2種類があります。どちらを使っても構いませんが、それぞれ効果が少し異なります。
今回は、その2種類の違いと、それぞれの記述方法をご紹介いたします。

まずは、2種類の例をご紹介いたします。実際に試してみて下さい。

■visibilityプロパティを使って表示・非表示を切り替える場合：

■displayプロパティを使って表示・非表示を切り替える場合：

 周辺の要素に影響するかしないかの違い

試してみるとすぐに分かりますが、1つ目の例と2つ目の例では、周辺にある文章の表示のされ方が異なります。
1つ目のvisibilityプロパティを使う例では、文章の表示は一切変化しません。しかし、2つ目のdisplayプロパティを使う例では、画像が消えると画像が表示されていた位置に文章が入り込みます。

画像の表示・非表示が切り替わるという点では同じですが、この2つの方法には以下の違いがあります。

・visibilityプロパティを使う場合：
      → 周辺の表示には影響しない。
・displayプロパティを使う場合：
      → 周辺の表示に影響する。

visibilityプロパティを使って非表示にした場合は、ただ純粋にその表示が消えるだけです。
それに対して、displayプロパティを使って非表示にした場合は、あたかもその要素が存在しないかのように周辺の表示が再調整されます。

 表示・非表示の切り替えにどちらを使うか？

visibilityプロパティを使う場合は、非表示状態でもスペースを占有してしまいます。それに対して、displayプロパティを使う場合は、無駄な空間ができないのでスペースの節約になります。
しかし、displayプロパティを使う場合は、周辺の表示に影響するため、レイアウトによっては表示が崩れたり見にくくなったりするかも知れません。それに対して、visibilityプロパティを使えば、非表示状態でも他の表示に影響しないため、そのような問題は起こりません。

●displayプロパティの方が良さそうな例：
「表示・非表示の切り替え」は、不要な入力項目を隠したり、閲覧者の選択に応じて適切な入力項目だけを表示したりする目的によく使われます。そのような、「1度選択したらほとんど変更されることはない」（それほど頻繁に変化するわけではない）場合は、無駄なスペースを消費しないdisplayプロパティを使えばよいでしょう。

●visibilityプロパティの方が良さそうな例：
しかし、マウスの動きに合わせて表示・非表示が切り替わるような場合では、displayプロパティだと見にくくなる可能性があります。マウスが動くたびに周囲のレイアウトが変化してしまうからです。そのような、「頻繁に表示・非表示状態が切り替わる」場合は、他の表示に影響しないvisibilityプロパティを使う方が良さそうです。

visibilityプロパティを使う場合でも、displayプロパティを使う場合でも、記述にあまり差はありません。迷った場合には両方で試してみて、使いやすい方を採用すれば良いでしょう。

それぞれの具体的な記述方法は、次のページでご紹介いたします。

                                            1 / 2 / 3                              次へ>>>

ホームページ制作から独自ドメイン、高性能･大容量サーバーの全て揃ったお得なパッケージプランをご提案。