【初心者向け】CSSのdisplay:noneを解除する方法と使い方のサンプルコード – JPSM

CSSのdisplay:noneを解除する方法と使い方のサンプルコード

CSSのdisplay:noneを解除を徹底解説CSS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

CSSのdisplay:noneとは、HTML要素を非表示にするためのCSSプロパティです。

しかし、一度display:noneに設定してしまうと、その要素を表示することができません。

この記事では、初心者向けに、CSSのdisplay:noneを解除する方法と使い方について解説します。

【1. display:noneを解除する方法】

display:noneに設定されたHTML要素を解除する方法には、次の2つの方法があります。

1-1. JavaScriptを使った解除方法

JavaScriptを使って、display:noneに設定されたHTML要素を解除する方法を紹介します。

// idが"target"の要素を表示する
document.getElementById("target").style.display = "block";

上記のコードでは、idが”target”の要素を表示するために、style.displayプロパティを”block”に設定しています。

1-2. CSSを使った解除方法

CSSを使って、display:noneに設定されたHTML要素を解除する方法を紹介します。

// classが"target"の要素を表示する
.target {
  display: block !important;
}

上記のコードでは、classが”target”の要素を表示するために、displayプロパティを”block”に設定しています。

!importantを使用することで、優先順位を上げています。

【2. display:noneの代替方法】

display:none以外にも、HTML要素を非表示にする方法があります。

代表的なものに、opacityやvisibilityがあります。

2-1. opacityを使った非表示方法

opacityを使って、HTML要素を非表示にする方法を紹介します。

// idが"target"の要素を非表示にする
#target {
  opacity: 0;
}

上記のコードでは、idが”target”の要素を非表示にするために、opacityプロパティを0に設定しています。

2-2. visibilityを使った非表示方法

visibilityを使って、HTML要素を非表示にする方法を紹介します。

// idが"target"の要素を非表示にする
#target {
  visibility: hidden;
}

上記のコードでは、idが”target”の要素を非表示にするために、visibilityプロパティをhiddenに設定しています。

これらの方法は、display:noneと異なり、要素が非表示になっても要素自体は存在しています。

そのため、JavaScriptなどで要素を操作することができます。

【3. display:noneを使った応用例】

display:noneを使った応用例をいくつか紹介します。

3-1. メニューのドロップダウン表示

メニューのドロップダウン表示には、display:noneを使った実装がよく使われます。

次は、クリックするとドロップダウンメニューを表示するJavaScriptのコード例です。

// idが"dropdown-menu"の要素を表示する
function showMenu() {
  document.getElementById("dropdown-menu").style.display = "block";
}

上記のコードでは、idが”dropdown-menu”の要素を表示するために、style.displayプロパティを”block”に設定しています。

3-2. タブの表示切り替え

タブの表示切り替えにも、display:noneを使った実装がよく使われます。

次は、クリックすると対応するタブを表示するJavaScriptのコード例です。

// idが"tab1"のタブを表示する
function showTab1() {
  document.getElementById("tab1").style.display = "block";
  document.getElementById("tab2").style.display = "none";
  document.getElementById("tab3").style.display = "none";
}

上記のコードでは、idが”tab1″のタブを表示するために、style.displayプロパティを”block”に設定しています。

同様に、idが”tab2″と”tab3″のタブを非表示にしています。

まとめ

CSSのdisplay:noneを解除する方法と使い方について、初心者向けに解説しました。

JavaScriptを使った方法とCSSを使った方法があり、それぞれのサンプルコードを紹介しました。

display:none以外のHTML要素を非表示にする方法や、応用例も紹介しました。

これらの知識を活用して、より使いやすいWebページを作りましょう。