可視性:非表示と表示:なしの違いは何ですか?

1222
Chris Noe 2008-09-26 02:37.

CSSルールvisibility:hiddendisplay:noneその両方により、要素が表示されなくなります。これらの同義語ですか?

18 answers

1523
kemiller2002 2008-09-26 02:40.

display:none問題のタグがページにまったく表示されないことを意味します(ただし、DOMを介してタグを操作することはできます)。他のタグの間にスペースは割り当てられません。

visibility:hiddenつまり、とは異なりdisplay:none、タグは表示されませんが、ページ上でタグにスペースが割り当てられます。タグがレンダリングされ、ページに表示されません。

例えば:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

交換[style-tag-value]display:noneのような結果になります。

test |   | test

交換[style-tag-value]visibility:hiddenのような結果になります。

test |                        | test
244
user22151 2008-09-26 03:50.

それらは同義語ではありません。

display:none ページの通常のフローから要素を削除し、他の要素が入力できるようにします。

visibility:hidden まだスペースを占めるように、ページの通常のフローに要素を残します。

あなたが遊園地に乗るために列に並んでいて、列の誰かが非常に乱暴になって、警備員が列から彼らを引き抜くと想像してください。次に、列に並んでいる全員が1つ前に移動して、空になったスロットを埋めます。これはのようなものdisplay:noneです。

これを同様の状況と比較してください。ただし、目の前の誰かが不可視のマントを着ています。線を見ていると、空きスペースがあるように見えますが、まだ誰かがいるので、その空きスペースを埋めることはできません。これはのようなものvisibility:hiddenです。

113
Kip 2009-10-03 11:27.

追加する価値のあることの1つは、質問されていませんが、オブジェクトを完全に透明にする3番目のオプションがあることです。考えてみましょう:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(結果を確認するには、上の[コードスニペットの実行]ボタンをクリックしてください。)

1と2の違いはすでに指摘されています(つまり、2はまだスペースを占有します)。ただし、2と3には違いがあります。ケース3の場合、リンクにカーソルを合わせるとマウスが手に切り替わり、ユーザーはリンクをクリックでき、Javascriptイベントがリンクで発生します。これは通常はありませんあなたが望む行動(多分、時にはそれがあります?)。

もう1つの違いは、テキストを選択してから、プレーンテキストとしてコピー/貼り付けすると、次のようになることです。

1st link.
2nd  link.
3rd unseen link.

ケース3の場合、テキストはコピーされます。これは、ある種の透かし入れに役立つかもしれません。あるいは、不注意にユーザーがコンテンツをコピー/貼り付けした場合に表示される著作権表示を非表示にしたい場合はどうでしょうか。

91
mmaibaum 2008-09-26 02:39.

display:none レイアウトフローから要素を削除します。

visibility:hidden それを隠しますが、スペースを残します。

74
Govinda 2015-01-14 23:39.

子ノードに関しては大きな違いがあります。例:親divとネストされた子divがある場合。したがって、次のように書くと:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

この場合、どのdivも表示されません。しかし、あなたがこのように書くなら:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

次に、子divが表示されますが、親divは表示されません。

19
ConroyP 2008-09-26 02:41.

それらは同義語ではありません-display: noneページのフローから要素を削除し、ページの残りの部分はそこにないかのように流れます。

visibility: hidden 要素を非表示にしますが、ページフローは非表示にし、ページ上に要素用のスペースを残します。

15
wcm 2008-09-26 02:40.

display: none ページから要素を完全に削除し、要素がまったく存在しないかのようにページが作成されます。

Visibility: hidden 表示できなくなっても、ドキュメントフローにスペースが残ります。

これはあなたがしていることに応じて大きな違いを生むかもしれないし、しないかもしれません。

11
Steven Williams 2008-09-26 02:41.

visibility:hiddenオブジェクトがまだページ上の垂直方向の高さを占めます。それでdisplay:none完全に削除されます。画像の下にテキストがある場合display:none、そのテキストは上にシフトして画像があったスペースを埋めます。可視性を行う場合:非表示のテキストは同じ場所に残ります。

9
slashnick 2008-09-26 02:41.

display:none要素を非表示にし、スペースが占めていたスペースを折りたたむのに対しvisibility:hidden、要素を非表示にして要素スペースを保持します。display:noneは、古いバージョンのIEおよびSafariのjavascriptから利用できるいくつかのプロパティにも影響します。

8
Pearl 2013-05-30 03:47.

visibility:hiddenスペースを保持します。display:noneそうではありません。

7
szeryf 2013-04-02 07:42.

他のすべての回答に加えて、IE8には重要な違いがありdisplay:noneます。要素の幅または高さを使用して取得しようとすると、IE8は0を返します(他のブラウザーは実際のサイズを返します)。IE8は、に対してのみ正しい幅または高さを返しますvisibility:hidden

6
Anu 2018-01-29 20:08.
display: none; 

このページでは利用できず、スペースも占有しません。

visibility: hidden; 

要素を非表示にしますが、それでも以前と同じスペースを占有します。要素は非表示になりますが、それでもレイアウトに影響します。

visibility: hiddenスペースを保持しますが、スペースdisplay: noneは保持しません。

表示なし例:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

可視性の隠された例: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

5
Shubelal Kumar 2011-12-27 19:25.

可視性プロパティがに設定されている"hidden"場合、ブラウザは、コンテンツが非表示であっても、ページ上のスペースを占有します。
ただし、オブジェクトをに設定する"display:none"と、ブラウザはそのコンテンツ用にページ上のスペースを割り当てません。

例:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

詳細を見る

5
Ramesh 2013-05-30 03:49.

visibility:hidden ページ内の要素を保持し、そのスペースを占有しますが、ユーザーには表示されません。

display:none このページでは利用できず、スペースを占有しません。

3
Dave Burton 2017-10-01 14:18.

もう1つの違いはvisibility:hidden、実際には非常に古いブラウザで機能し、display:none機能しないことです。

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

2
Adam Jagosz 2019-06-19 10:25.

違いはスタイルを超えており、JavaScriptで操作したときの要素の動作に反映されています。

の影響と副作用display: none

  • ターゲット要素はドキュメントフローから削除されます(他の要素のレイアウトには影響しません)。
  • すべての子孫が影響を受けます(表示されず、この継承から「スナップアウト」できません)。
  • 測定値は、ターゲット要素のためにもその子孫のために作ることができない-彼らは、このように、すべてでレンダリングされていない彼らのclientWidthclientHeightoffsetWidthoffsetHeightscrollWidthscrollHeightgetBoundingClientRect()getComputedStyle()、すべてのリターン0の。

の影響と副作用visibility: hidden

  • ターゲット要素はビューから非表示になりますが、フローから取り出されず、レイアウトに影響を与え、通常のスペースを占有します。
  • innerTextinnerHTMLターゲット要素と子孫の(ではなく)は空の文字列を返します。
1
Pritam Bohra 2018-02-04 21:10.

display:none;要素を表示せず、ページ上の要素にスペースを割り当てませんが、ページにvisibility:hidden;は要素を表示しませんが、ページにスペースを割り当てます。どちらの場合も、DOMの要素にアクセスできます。より良い方法でそれを理解するには、次のコードを見てください:display:none対visibility:hidden

0
cleaver 2020-03-05 05:48.

ここには詳細な回答がたくさんありますが、影響があるので、アクセシビリティに対処するためにこれを追加する必要があると思いました。

display: none;またvisibility: hidden;、すべてのスクリーンリーダーソフトウェアで読み取れるとは限りません。視覚障害のあるユーザーが経験することを覚えておいてください。

同義語についても質問されます。text-indent: -9999px;ほぼ同等のもう1つです。との重要な違いtext-indentは、スクリーンリーダーによって読み取られることが多いことです。ユーザーはまだリンクにタブで移動できるため、少し悪い経験になる可能性があります。

アクセシビリティに関して、今日使用されているのは、スクリーンリーダーに表示されている間、要素を非表示にするスタイルの組み合わせです。

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

コンテンツ本体のアンカーへの「コンテンツにスキップ」リンクを作成することをお勧めします。視覚障害のあるユーザーは、おそらくすべてのページでナビゲーションツリー全体を聞きたくないでしょう。リンクを視覚的に非表示にします。ユーザーはタブを押すだけでリンクにアクセスできます。

アクセシビリティと非表示コンテンツの詳細については、以下を参照してください。

  • https://webaim.org/techniques/css/invisiblecontent/
  • https://webaim.org/techniques/skipnav/

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

この太陽に優しいショルダーバッグで一日中外出してください

この太陽に優しいショルダーバッグで一日中外出してください

画像クレジット:Richard Mackney / Flickrトラベリングライトは必需品だけを運ぶことを意味するかもしれませんが、デバイスを補充する方法がない外出先では、接続を維持するのが難しくなる可能性があります。それはあなたがすべての生き物の快適さやクールなガジェットを捨てる必要があるという意味ではありません、ただあなたがいくつかのより小さなものを手に入れる必要があるということです、そしておそらくあなた自身をジュースに保つためにいくつかの、例えば非正統的な充電装置を使うでしょう。

ミッドセンチュリーリゾートのポストカードが廃墟に変わるのを見る

ミッドセンチュリーリゾートのポストカードが廃墟に変わるのを見る

ニューヨーク州スプリンググレンにある放棄されたホモワックロッジのボーリング場。キャッツキル南部のこの地域は、ニューヨーク市からのユダヤ人の行楽客に人気があることから、かつてはボルシチベルトとして知られていました。

ブルックリンスレートの美しいボードをあなたのテーブルに座らせましょう

ブルックリンスレートの美しいボードをあなたのテーブルに座らせましょう

ブルックリンスレートブルックリンスレートのマグカップとコースターの賞賛をすでに歌っており、それらの食器製品も同様に堅実です。ブルックリンスレートは、さまざまなサイズとテクスチャのスレートの完全な採石場を販売しています。一部のオプションは赤でも利用できます。上で見ることができるように、彼らは同様にカスタマイズをします。

遺伝子分析により、私たちの体内に生息する微生物の99%がカタログ化されていないことが明らかになりました

遺伝子分析により、私たちの体内に生息する微生物の99%がカタログ化されていないことが明らかになりました

画像:Juan Gaertner / Shutterstock私たちの体の内部は、私たちの細胞とは何の関係もない何十億もの微生物が住んでいる本物の生態系です。これがまだ少し気になることではなかったかのように、これらの微生物の99%が研究されたことがないことがわかりました。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language