Search

検索したいワードを入力してください

display:noneの解除方法|そのほかの指定できる値も解説

更新日:2022年07月27日

display:noneの解除方法がわからないということはありませんか。本記事では、display:noneの解除方法や活用方法、displayプロパティに指定できる値などを紹介します。コーディングスキルを向上させたい方は、ぜひチェックしてみてください。

「display:noneってどういう場面で使うの?」
「display:noneを解除するにはどうしたらいいの?」
「displayプロパティにはnone以外の値も指定できるの?」
このように、CSSを書いている方には多くの疑問があるのではないでしょうか。

本記事では、display:noneの役割や活用方法、解除方法といった基礎知識に加え、displayプロパティに指定できる値を紹介します。

この記事を読むことで、display:noneに関する幅広い知識が身に付き、正しい使い方や解除方法を理解することができます。

display:noneを使いこなし、コーディングスキルを向上させたい方は、ぜひ参考にしてみてください。

display:noneとは

displayは要素の表示方法に関するCSSのプロパティであり、値をnoneにすることで、指定した文字や画像などの要素を非表示にできます。

なお、ユーザーから見えないように画面上の要素が非表示になるだけで、HTMLのソースコードには記述が残されています。

display:noneの活用方法

display:noneはレスポンシブデザインを作る際によく用いられます。レスポンシブデザインとは、画面サイズに応じて表示を変えるデザインのことで、ユーザーのデバイス幅に合わせて表示内容を最適化できます。

display:noneを使用すれば、パソコンでは要素Aを表示し、スマートフォンでは要素Aを非表示にして要素Bを表示するといったように、デバイスごとに表示を切り替えることができます。

display:noneの解除方法

display:noneを使うことで要素を非表示にできますが、解除して再び表示させたいこともあるのではないでしょうか。ここからはdisplay:noneを解除する方法を3つ紹介するので、ぜひ参考にしてみてください。

表示の値を指定する

displayプロパティはnone以外にも様々な値を指定できます。noneは要素が非表示になる値なので、代わりに表示の値を指定することでdisplay:noneを解除できます。

なお、非表示を解除するだけなら、単純にdisplay:none自体を削除すればよいです。上記はdisplayプロパティを残したまま値を書き換えており、非表示から表示に切り替える方法となります。

visibility:hiddenを使用する

display:noneの記述を削除し、代わりにvisibility:hiddenを使用するという解除方法もあります。どちらも要素を非表示にする役割があり、display:noneを使う場合と同じように見えますが、微妙に動作が異なります。

display:noneは要素自体を無くすのに対し、visibility:hiddenは単に要素を非表示にするだけであり、指定した要素分の空白が残ります。そのため、visibility:hiddenは要素自体の削除を防ぐ場合に有効です。

display:blockで上書き指定する

display:noneの解除方法として、display:blockで上書き指定することも挙げられます。上書きできないときは、後に記述したりセレクタの種類を変えたりするなど、display:blockの優先度を上げると解除できるでしょう。

displayに指定できる値

次のページ:contents

初回公開日:2022年07月27日

記載されている内容は2022年07月27日時点のものです。現在の情報と異なる可能性がありますので、ご了承ください。
また、記事に記載されている情報は自己責任でご活用いただき、本記事の内容に関する事項については、専門家等に相談するようにしてください。

Latests