display:noneの解除方法｜そのほかの指定できる値も解説
更新日：2023年11月17日
display:inline-gridと指定することで、インライン要素のように扱われるグリッドレイアウトのコンテナを生成できます。先ほどのdisplay:gridはブロックレベルのコンテナを生成するものなので、用途に合わせて選択しましょう。
特定のレイアウトモードで意味を持つもの
displayプロパティには、特定のレイアウトモードで意味を持つ値も指定できます。例えば、以下のようなtable形式のレイアウトをHTML側ではなくCSS側で行う場合に意味を持つ値が挙げられます。
・table-row-group（≒tbody）
・table-header-group（≒thead）
・table-footer-group（≒tfoot）
・table-row（≒tr）
・table-cell（≒td）
・table-column-group（≒colgroup）
・table-column（≒col）
・table-caption（≒caption）
グローバル値
displayプロパティにはグローバル値も指定できます。グローバル値とは、あらゆるCSSプロパティに適用できる値で、inheritやinitial、revert、unsetが挙げられます。これらは、基本的に初期値や継承値をセットする際に使用されます。
display:noneの解除方法を理解しよう
今回は、display:noneの活用方法や解除方法、displayプロパティに指定できる値などを紹介しました。visibility:hiddenでも要素を非表示にできるので、使用場面に応じて使い分けてみてください。
本記事の内容を参考に、display:noneの使い方や解除方法を正しく理解し、コーディングスキルを向上させましょう。
初回公開日：2022年07月27日
記載されている内容は2022年07月27日時点のものです。現在の情報と異なる可能性がありますので、ご了承ください。
また、記事に記載されている情報は自己責任でご活用いただき、本記事の内容に関する事項については、専門家等に相談するようにしてください。