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

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

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

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

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

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

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language