あなたがウェブページの開発に取り組んでいるときには、ある理由でアイテムの特定の領域を「隠す」必要があることがあります。 もちろん、質問内の項目をHTMLマークアップから削除することもできますが、コード内に残しておきたい場合はどうしたらよいですか（何らかの理由でブラウザ画面に表示されません）。これはまもなく行います）。 あなたのHTMLに要素を保持し、表示するために非表示にするには、CSSに切り替えます。
HTMLにある要素を非表示にする最も一般的な2つの方法は、CSSプロパティを「表示」または「表示」に使用することです。 一見すると、これらの2つのプロパティはほとんど同じことをするように見えるかもしれませんが、それぞれには明確な相違点があります。 display：noneとvisibility：hiddenの違いを見てみましょう。
可視性
visibility：hiddenのCSSプロパティ/値のペアを使用すると、ブラウザから要素が非表示になります。 しかし、隠された要素はまだレイアウト内のスペースを占めています。 それはあなたが基本的に要素を不可視にしたようなものですが、まだそれは残っていて、それが放置されていたとしていたであろうスペースを占めています。
あなたのページにDIVを置き、100x100ピクセルを占めるようにCSSを使用すると、visibility：hiddenプロパティはDIVを画面に表示させませんが、それに続くテキストはまだそこにあるように動作します100×100の間隔。
正直なところ、可視性プロパティは、私たちが頻繁に使用したものではなく、確かにそれ自体ではありません。 特定の要素に対して必要なレイアウトを達成するために配置などの他のCSSプロパティを使用している場合は、可視性を使用して最初にその項目を非表示にし、ホバー上で「戻す」だけです。 それはこのプロパティの1つの可能な使用ですが、再び、それは何らかの頻度で頼りになるものではありません。
表示
要素が通常のドキュメントフローに残るvisibilityプロパティとは異なり、display：noneは要素をドキュメントから完全に削除します。 たとえHTMLがまだソースコードに入っていても、スペースを取らない。 これは、実際には文書フローから削除されたためです。 すべての目的と目的のために、アイテムはなくなっています。 これは、あなたの意図が何であるかに応じて、良いことでも悪いことでもあります。 このプロパティを誤用すると、ページに損害を与える可能性もあります。
ページをテストするときは、しばしば "display：none"を使います。 ページの他の領域をテストできるようにするために、ある程度離れていくための領域が必要な場合は、display：noneを使用できます。 しかし、覚えておくべきことは、そのサイトを実際に立ち上げる前に要素をページに戻すことです。 これは、このメソッドのドキュメントフローから削除されたアイテムは、HTMLマークアップに残っていても、検索エンジンやスクリーンリーダーには表示されないためです。 これまで、この方法は検索エンジンのランキングに影響を与えようとするブラックハットの方法として使われていたので、表示されない項目はGoogleがそのアプローチが使われている理由を調べる赤い旗になる可能性があります。
私たちが役立つものはありません。実用的なウェブサイトで使用する場所は、1つのディスプレイサイズで利用できるが他のサイトでは利用できない要素を持つ可能性のあるサイトを構築するときです。 display：noneを使用して、その要素を非表示にして、後でメディアクエリーを使用してそれを元に戻すことができます。 これはdisplay：noneの許容される使用です。あなたが悪意のある理由で何かを隠そうとしているわけではありませんが、そうする必要が正当です。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：3/3/17