読み込み中...

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

CSSのdisplay:noneを解除を徹底解説 CSS
この記事は約4分で読めます。

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

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

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

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験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ページを作りましょう。