display:noneの解除方法｜そのほかの指定できる値も解説
更新日：2024年10月12日
「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に指定できる値
初回公開日：2022年07月27日
記載されている内容は2022年07月27日時点のものです。現在の情報と異なる可能性がありますので、ご了承ください。
また、記事に記載されている情報は自己責任でご活用いただき、本記事の内容に関する事項については、専門家等に相談するようにしてください。