display:noneの解除方法｜そのほかの指定できる値も解説
更新日：2024年10月12日
displayプロパティにはnone以外の値も指定できます。displayは要素の表示に関するプロパティであるため、指定する値によって要素の表示のされ方が変わってきます。ここからは、displayプロパティに指定できる値を紹介するので、ぜひ参考にしてみてください。
contents
displayプロパティの値にcontentsを指定することで、ボックスの要素を残したまま周囲のボックスを省略できます。
なお、displayプロパティに指定できる値の中で、要素がボックスを作るかどうかを定義する値はcontentsとnoneの2つしかありません。
none
displayプロパティの値をnoneにすることで、要素を非表示にできます。要素自体の存在が無くなるため、レイアウトに影響を与えません。
visibility:hiddenも非表示にする役割がありますが、display:noneは要素自体を無くす、visibility:hiddenは要素を残しつつ非表示にするだけ、といった違いがあります。
block
blockはdisplayプロパティによく使われる値の1つで、blockを指定することでブロック要素を生成できます。要素の前後に改行が生成されるため、要素が縦に並んでいきます。また、高さ（height）や幅（width）、上下左右の余白（paddingとmargin）も指定できます。
inline
inlineもdisplayプロパティによく使われる値の1つで、inlineを指定することでインライン要素を生成できます。blockと比べて、要素の前後には改行が入らず横に並んでいき、幅と高さの指定ができません。余白に関しては左右のみ調整可能です。
table
displayに指定できる値として、tableも挙げられます。HTMLのtableタグと同じような要素を生成でき、中央揃えや複数行などの様々な設定が可能です。
要素を横並びにするには、floatやinline-blockなどの方法もありますが、tableの場合は要素の高さが揃った状態で横並びになるため、レイアウトの崩れを防止できます。
list-item
list-itemを指定することで、li要素と同じような性質を持つリスト状の要素を生成できます。先頭にリストマーカーが付与され、インライン要素でも改行されます。ただ、リストはHTMLのulタグとliタグでも作れるため、使用頻度はあまり高くありません。
初回公開日：2022年07月27日
記載されている内容は2022年07月27日時点のものです。現在の情報と異なる可能性がありますので、ご了承ください。
また、記事に記載されている情報は自己責任でご活用いただき、本記事の内容に関する事項については、専門家等に相談するようにしてください。