HTMLで作った特定箇所の表示/非表示を切り替えるには

JavaScriptを使ってスタイルを変化させれば、HTMLで作った任意の箇所の表示/非表示状態を簡単に切り替えられます。その際、表示/非表示を切り替える目的で使えるスタイルには、displayプロパティvisibilityプロパティの2種類があります。どちらを使っても表示/非表示を切り替えられますが、それぞれ効果が異なります。今回は、その2種類の違いと記述方法を解説します。

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

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

サンプル画像1 この文章が表示されているボックス内には、1枚の風景画像も表示されています。例として、この画像の表示/非表示を切り替えてみます。この文章の末尾にある「表示」ボタンや「非表示」ボタンをクリックしてみて下さい。画像が表示されたり消えたりします。

表示/非表示 切替ボタン:


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

サンプル画像2 この文章が表示されているボックス内にも、1枚の風景画像が表示されています。先ほどと同様に、この画像の表示/非表示も切り替えてみます。この文章の末尾にある「表示」ボタンや「非表示」ボタンをクリックしてみて下さい。画像が表示されたり消えたりします。その際、この文章の表示位置がどうなるかにも注目して下さい。

表示/非表示 切替ボタン:



表示/非表示を切り替えた際に、周辺の要素に影響するかしないかの違い

上記のサンプルで試してみるとすぐに分かりますが、前者のvisibilityプロパティを使って表示/非表示を切り替える例と、後者のdisplayプロパティを使って表示/非表示を切り替える例では、周辺にある物体の表示のされ方に関して下記の違いがあります。

visibilityプロパティを使う場合 → 周辺の表示には影響しない
visibilityプロパティで表示/非表示を切り替えた場合

visibilityプロパティで表示/非表示を切り替えた場合

visibilityプロパティを使って非表示にした場合は、ただ対象物の表示が消えるだけで、周囲にある文字や画像などの配置は一切変化しません(※黄色矢印部分参照)。画像の表示を消した場合でも、他の要素の表示は「画像が表示されている場合の配置」のままです。


 
displayプロパティを使う場合 → 周辺の表示に影響する
displayプロパティで表示/非表示を切り替えた場合

displayプロパティで表示/非表示を切り替えた場合

displayプロパティを使って非表示にした場合は、消した対象物の周囲にある文字や画像などの配置も再調整されます(※黄色矢印部分参照)。画像を消した場合は、あたかもその画像が存在しなかったかのように周辺の要素の配置が変化します。


 
このように、同じ「表示/非表示の切り替え」でも、visibilityプロパティとdisplayプロパティとでは、周辺の表示に影響するかどうかの差があります。

表示/非表示を切り替える2方法のメリットとデメリット

それでは、ある要素の表示/非表示を動的に切り替えたい場合は、visibilityプロパティとdisplayプロパティのどちらを使う方が良いでしょうか? それぞれにメリットとデメリットがありますので、目的に応じて選んで下さい。

visibilityプロパティで切り替える場合のメリット:
displayプロパティを使って表示/非表示を切り替えると周辺にある要素の配置に影響するため、レイアウトによっては表示が崩れたり見にくくなったりするかも知れません。それに対して、visibilityプロパティを使えば非表示状態でも他の要素の配置に影響しないため、そのような問題は起こりません。

displayプロパティで切り替える場合のメリット:
visibilityプロパティを使う場合は、非表示状態でも表示状態と同じスペースを占有してしまいます。それに対して、displayプロパティを使う場合は、無駄な空間ができないのでスペースの節約になります。

表示/非表示の切り替えにはvisibilityとdisplayのどちらを使うか?

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

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

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

なお、visibilityプロパティの値は「表示か非表示か」を選ぶだけなので2択ですが、displayプロパティの値は「表示のされ方」を選ぶために3つ以上の選択肢があります。その点も含めたそれぞれの具体的な記述方法については、次のページからご紹介いたします。

【目次】