ウェブページでは「display: none」というCSSを使うと、要素を非表示にできます。
しかし、ユーザーの操作に応じて要素を非表示にしたり、逆に表示させたい場面が現場ではよくあります。
実はこのような切り替えは、JavaScript を使うと簡単に実現することができるのです。
この記事では、「display: none」の基本から、使い方、他の方法との違いまで詳しく解説していきます。
また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！
- 現役のフルスタックWebエンジニアとして活躍中
- プログラミングスクールで教材を執筆した経験アリ
- 副業でプログラミングスクール講師をしている教育のプロ
display属性とは
ここでは、初心者の方向けにまず「display」属性について解説します。
display 属性を使うと、ウェブページ上の各要素がどのように見えるか、どんな風に配置されるかを決めることができます。
Block
‘Block’という値を使うと、要素は「ブロックレベル要素」として扱われます。
これは要素が新しい行から始まり、利用可能な全幅を占めるという意味です。
通常、段落(<p>)や見出し(<h1>)などがブロックレベル要素です。
.hoge {
display: block;
}このCSSは、hoge クラス要素をブロックレベル要素として表示します。
Inline
‘Inline’は、要素を行の中に表示します。
これは、テキスト(<span>)やリンク(<a>)のように、他のインライン要素と同じ行に並ぶ要素です。
インライン要素は、必要な幅だけを占める特性があります。
.hoge {
display: inline;
}このCSSは、hoge クラス要素をインライン要素として表示します。
Inline-Block
‘Inline-Block’は、ブロックレベルの特性を保ちながら、インライン要素のように他の要素と同じ行に配置されます。
これにより、要素は他の要素と同じ行に並びつつ、ブロックのような特性を持つことができます。
.hoge {
display: inline-block;
}このCSSは、hoge クラス要素をインラインブロック要素として表示します。
None
今回のキーワードとなる display 属性である ‘None’は、要素を完全に非表示にします。
この設定を適用すると、その要素はページから消え、他の要素がそのスペースを埋めます。
.hoge {
display: none;
}このCSSは、hiddenクラスが適用された要素を非表示にします。
JavaScriptでdisplay: noneを追加・削除(解除)・切り替える方法
では、いよいよ本題です。
JavaScriptを使って、ウェブページの要素にdisplay: noneを追加したり、削除（解除）したり、切り替えたりする方法を紹介します。
display: noneを追加する方法
要素にdisplay: noneを追加することで、その要素をページから隠すことができます。
以下は、JavaScriptを使用して特定の要素にdisplay: noneを追加する方法の例です。
// 要素を取得
let element = document.getElementById('myElement');
// display: noneを設定
element.style.display = 'none';このコードは、IDがmyElementの要素を取得し、そのスタイルにdisplay: noneを設定しています。これにより、その要素はページ上から見えなくなります。
display: noneを削除(解除)する方法
要素からdisplay: noneを削除するには、displayプロパティを空にするか、または別の値（例：blockやinlineなど）に設定します。
以下は、display: noneを削除する方法の例です。
// 要素を取得
let element = document.getElementById('myElement');
// display: noneを削除
element.style.display = '';このコードは、myElementというIDを持つ要素からdisplay: noneを削除しています。
これにより、要素は元の表示スタイルに戻ります。
display: noneを切り替える方法
要素のdisplayプロパティをnoneと他の値（例えばblockやinline）とで切り替えるには、条件文を使うことができます。
以下は、その方法の例です。
// 要素を取得
let element = document.getElementById('myElement');
// displayプロパティを切り替える
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}このコードは、myElementというIDを持つ要素のdisplayプロパティがnoneかどうかをチェックし、それに応じてdisplayプロパティをblockまたはnoneに切り替えます。
これにより、ユーザーの操作に応じて要素を表示したり隠したりすることができます。
JavaScriptでstyleのdisplayを設定する方法
JavaScriptを使って要素のスタイルプロパティであるdisplayを設定するには、複数の方法があります。
それぞれの方法には特徴があり、使い分けが重要です。
style.displayを使う方法
最も一般的な方法は、style.displayプロパティを直接設定することです。
これにより、特定の要素のdisplayプロパティを簡単に変更できます。
// 要素を取得
let element = document.getElementById('myElement');
// displayプロパティを設定
element.style.display = 'none';この方法は、特定のスタイルプロパティの値を読み書きするのに適しています。
style.setPropertyを使う方法
style.setPropertyメソッドを使うと、CSSのカスタムプロパティ（変数）を含む任意のスタイルを設定できます。このメソッドは、特にCSS変数を使用する場合に便利です。
// 要素を取得
let element = document.getElementById('myElement');
// setPropertyメソッドを使用してdisplayプロパティを設定
element.style.setProperty('display', 'none');このメソッドは、CSSプロパティの名前と値を個別に指定するので、より動的なスタイル変更が可能です。
style.cssTextを使う方法
style.cssTextプロパティを使用すると、一度に複数のスタイルを設定できます。
これは、要素のスタイル全体を書き換える際に有効です。
// 要素を取得
let element = document.getElementById('myElement');
// cssTextプロパティを使用して複数のスタイルを設定
element.style.cssText = 'display: none; color: red;';この方法では、複数のスタイルを一つの文字列として設定するため、大きなスタイル変更を効率的に行うことができます。
それぞれの違い・使い分け（場面別ソースコード例付き）
style.displayを使う場合
シナリオ: 特定の要素だけを簡単に表示・非表示に切り替えたい場合。
ソースコード例:
// 要素を取得
let element = document.getElementById('myElement');
// 要素を非表示にする
element.style.display = 'none';
// 要素を表示する
element.style.display = 'block';この方法は直接的で、特定の要素の表示状態を簡単に制御できます。
style.setPropertyを使う場合
シナリオ: 動的な値やCSS変数を扱う必要がある場合。
ソースコード例:
// 要素を取得
let element = document.getElementById('myElement');
// CSS変数を使ってdisplayプロパティを設定
let displayStatus = 'none';
element.style.setProperty('display', displayStatus);この方法は、変数を使ってより動的にスタイルを設定する際に便利です。
style.cssTextを使う場合
シナリオ: 複数のスタイルを一度に適用したい場合。
ソースコード例:
// 要素を取得
let element = document.getElementById('myElement');
// 複数のスタイルを一度に設定
element.style.cssText = 'display: none; color: red; font-size: 14px;';この方法は、多数のスタイル変更を一括で適用するときに効率的です。
各方法は、使用する状況や要件によって選んであげればOKです。
style.displayはシンプルな表示切替に、style.setPropertyは動的なスタイル適用やCSS変数利用に、style.cssTextは複数のスタイルを一括で設定したい場合に最適です。
これらの違いを理解し、適切な方法を選択することで、JavaScriptを使用したスタイル制御がより効果的になります。
おまけ：jQueryでdisplay: noneを追加・削除(解除)・切り替える方法
jQueryを使用すると、JavaScriptに比べてより簡単にDOM要素のスタイルを操作できます。
ここでは、display: noneを追加、削除（解除）、切り替える方法を見ていきましょう。
jQueryでdisplay: noneを追加する方法
要素にdisplay: noneを追加するには、jQueryの.hide()メソッドを使用します。
// 要素を非表示にする
$('#myElement').hide();このコードは、IDがmyElementの要素をページから隠します。.hide()メソッドは内部的にdisplay: noneを適用します。
jQueryでdisplay: noneを削除(解除)する方法
display: noneを削除して要素を再表示するには、.show()メソッドを使います。
// 要素を表示する
$('#myElement').show();このコードは、myElementの要素を再び表示します。.show()メソッドは、display: noneを取り除き、元のdisplayプロパティの値に戻します。
jQueryでdisplay: noneを切り替える方法
要素の表示状態を切り替えるには、.toggle()メソッドが便利です。
これは、要素が表示されている場合は隠し、隠されている場合は表示します。
// displayプロパティを切り替える
$('#myElement').toggle();このコードは、myElementの要素が表示されていればそれを隠し、隠されていれば表示します。.toggle()メソッドは、内部的に.show()と.hide()の機能を自動で切り替えます。
jQueryを使うと、このように簡潔なコードで要素の表示状態を制御できるので、特に多くのDOM操作が必要な大規模なウェブアプリケーション開発において便利です。
まとめ
JavaScriptとjQueryを使って、ウェブページの要素の表示・非表示を制御する方法を紹介しました。
JavaScriptでは、style.displayやstyle.setPropertyを使い、jQueryでは.hide()、.show()、.toggle()メソッドを用いることで、柔軟かつ簡単に要素の表示状態を変更できます。
JavaScript を学習するなら本がおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため、たった一冊だけでも OK なので本を使ってサクッと学習しておくのがおすすめです！
JavaScript はフロントエンドのすべてに通じますので、全体像をちゃんと学んでおくと給与アップにもつながりますよ。
ご自身のレベル別に JavaScript 本をおすすめしている記事がありますので、ぜひこちらも読んでみてください。
