.net column

.NET開発者のためのブログメディア
Webの開発ツール

jQueryで要素の表示と非表示を行う方法その1【display none】

2020年03月26日

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

PL
displayプロパティを使うと、パソコンで見たときは表示する要素をスマホで見たときは非表示にするなど、複数デバイスへの対応が簡単にできるようになりますよ。
SE
“ボタンを押したときにだけ表示する”といった動きも再現できますね!

displayプロパティとは

displayプロパティは、要素の表示形式を変更できるCSSのプロパティの一つです。[ block ] や [ inline ] など、displayプロパティではさまざまな値を取れるのですが、要素の表示・非表示には [ none ] という値を使って、jQueryの中では次のように記述します。

ちなみに、あくまでも要素が非表示になるだけなので、[ display none ] を設定したからと言ってページの読み込み速度は上がりません。

また、要素の表示・非表示を切り替える方法には、[ display none ] 以外にも [ show / hide ] [ visibility ] などが挙げられます。表示・非表示についてもっと知りたい!という方は、ぜひ他のページも参考にしてみてください。

displayプロパティで表示・非表示を切り替えてみよう

ここでは、実際にdisplayプロパティを使って、要素の表示・非表示の切り替えを行っていきます。「切り替え」と聞くと少し難しく感じますが、要は次のことを行えばいいだけです。

  1. 要素のIDを取得
  2. イベント発生時に取得したIDに対して表示・非表示を行う

ソースコードは次のようになります。

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

非表示をクリックすると……
非表示

ちゃんと非表示になりましたね。
ボタンを押した結果

ロゴを複数にするとこんな感じに仕上がります。
すべて表示したり……
複数表示

いくつか非表示にしたり……などの切り替えを簡単に行うことができます。
複数の非表示

PL
今回はボタンで行いましたが、工夫をすればスクロールしたとき・マウスポインタを特定の要素に合わせたときなどのイベントでも切り替えは可能です。ただ、あくまでコンテンツを「非表示」にするだけなので、ページ読み込みの速度が上がるわけではないんですよ。
SE
なるほど。でもレスポンシブデザインは簡単にできそうですね。

displayプロパティで効率よくウェブページを作ろう

一つのソースコードで要素の表示・非表示を切り替えることができるdisplayプロパティ。
非表示に設定していてもコンテンツ自体は読み込まれるため表示スピードは上がりませんが、知っておくととても便利なプロパティです。ぜひ、ウェブページを作成する際に取り入れてみてはいかがでしょうか。


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

求人一覧

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

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