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

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

プロジェクト
リーダー

displayプロパティを使うと、パソコンで見たときは表示する要素をスマホで見たときは非表示にするなど、複数デバイスへの対応が簡単にできるようになりますよ。

システム
エンジニア

“ボタンを押したときにだけ表示する”といった動きも再現できますね！

displayプロパティとは

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

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

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

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

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

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

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

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

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

ちゃんと非表示になりましたね。

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

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

プロジェクト
リーダー

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

システム
エンジニア

なるほど。でもレスポンシブデザインは簡単にできそうですね。

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

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