.net column
.NET開発者のためのブログメディア

Webアプリケーションの作成

jQueryで要素の表示と非表示を行う方法その3【visibility】

2020年03月26日

jQueryでは、CSSのvisibilityプロパティを使うことで要素の表示・非表示を切り替えることができます。今回は、visibilityプロパティの概要や使い方を解説していきます。ぜひ、参考にしてみてください。

PL
visibilityプロパティを使うと、隠された要素の中の一部だけを表示するなどの小回りが効くんですよ。
PG
なるほど…!

visibilityプロパティとは

visibilityプロパティは、要素の表示形式を変更できるCSSのプロパティの一つ。visibilityプロパティでは、以下のような値を使ってjQueryの中で次のように記述します。
■要素を表示
要素名.style.visibility = “visible”;

■要素の非表示
要素名.style.visibility = “hidden”;

■要素を詰めて非表示
要素名.style.visibility = “collapse”;

同じように表示・非表示を切り替えるプロパティに [display: none] が挙げられますが、displayプロパティは要素分の領域を詰めるのに対し、visibilityプロパティでは要素分の領域を確保するため、レイアウトが崩れにくいというメリットがあります。

ただし、一点注意点として“Internet Explorerには対応していない”ということを覚えておきましょう。

<補足>
Internet Explorer(IE)は、今回のvisibilityプロパティをはじめ他のプロパティなどにも対応していないことが多いです。開発を行う環境としてIEは優れていないため、もし現在IEを使用しているのであれば他のブラウザに切り替えることをおすすめします。

visibilityプロパティを使って表示・非表示を切り替えてみよう

ここでは、実際にvisibilityプロパティを使って要素の表示・非表示を切り替えていきます。
ソースコードは次のとおりです。

実行すると、次のような結果になります。
実行結果

では、真ん中のロゴを非表示にしてみましょう。
非表示ボタンを押す

すると・・・
非表示にした結果

ロゴは非表示となっていますが、ロゴがあった場所は残っていることが分かりますね。これがvisibilityプロパティの最大の特徴です。ちなみにvisibilityプロパティを使わずに [display] プロパティを使うと、次のような表示となります。
displayプロパティの場合

PL
このように、それぞれのプロパティやメソッドの特徴を知っておくと、ウェブページを作成するときにも役立ちますよ。
PG
分かりました!

必要に応じてvisibilityプロパティを活用していこう

jQueryでは表示・非表示を切り替えるためのさまざまなプロパティやメソッドが用意されているため、比較的visibilityプロパティの出番は少ないかもしれません。しかし、“要素分の領域を確保したまま非表示にできる”という特徴があるなど、使い方によっては非常に便利なプロパティなので、ぜひ上手く活用してみてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs