CSSの可視性プロパティは何ですか？ディスプレイとどのように違いますか：なし？-CSSチュートリアル-php.cn

CSSの可視性プロパティは何ですか？ディスプレイとどのように違いますか：なし？

James Robert Taylor

リリース： 2025-03-19 15:24:24

オリジナル

232 人が閲覧しました

CSSの可視性プロパティは何ですか？ディスプレイとどのように違いますか：なし？

CSSのvisibilityプロパティは、要素がWebページに表示されるかどうかを制御するために使用されます。目にvisible 、 hidden 、 collapse 、 inheritなど、いくつかの可能な値があります。要素のvisibility hiddenに設定されている場合、要素はユーザーには見えませんが、ページのレイアウトのスペースを占有します。これは、隠された要素があるスペースを埋めるために他の要素が移動しないことを意味します。

対照的に、 display: none 。要素がdisplay: none 、それは完全に隠されており、レイアウト内のスペースを占有しません。ページ上の他の要素は、削除された要素が以前に占有していたスペースを埋めるためにシフトします。 visibility: hiddenとdisplay: none異なるシナリオで使用するものを決定するためには、レイアウトに影響を与えません。

「非表示」への可視性の設定は、要素のレイアウトにどのような効果がありますか？

要素のvisibilityをhiddenに設定すると、ユーザーには表示されませんが、ページのレイアウトに影響します。要素がレイアウトで占有するスペースは、予約されたままです。これはつまり：

この要素は、その寸法（幅、高さ、マージンなど）を保持し、その周りの他の要素の位置に影響を与え続けています。
非表示の要素がブロックレベルの要素である場合、レイアウトに新しい行が作成されます。
隠された要素の子要素も隠されますが、それらもレイアウト内のそれぞれのスペースを占有します。

たとえば、テキストの段落と画像が並んでいて、画像の可視性をhiddenに設定した場合、段落は左にシフトして、画像が取り上げるスペースを占有しません。画像がないことを除いて、レイアウトは視覚的に変更されません。

CSSアニメーションを使用して、要素の可視性をどのように切り替えることができますか？

CSSアニメーションを使用して要素の可視性を切り替えるには、 animationプロパティとキーフレームを使用して、 visibility: hiddenとvisibility: visibleの間を移行できます。これが段階的なアプローチです：

キーフレームを定義します：
要素の可視性が時間の経過とともにどのように変化するかを定義するキーフレームを作成する必要があります。また、より滑らかな遷移のopacityなど、他のプロパティをアニメーション化することもできます。
```
 <code class="css">@keyframes fadeInOut { 0%, 100% { visibility: hidden; opacity: 0; } 50% { visibility: visible; opacity: 1; } }</code>
```
ログイン後にコピー
アニメーションを適用します：
切り替えたい要素にアニメーションを適用します。必要に応じて、期間およびその他のタイミング機能を制御できます。
```
 <code class="css">.toggle-visibility { animation: fadeInOut 2s infinite; }</code>
```
ログイン後にコピー

この例では、 fadeInOutアニメーションにより、2秒ごとに要素がフェードインおよびその可視性を切り替えます。特定のニーズに合わせて、タイミング、反復カウント、およびその他のプロパティを調整できます。

どのシナリオで「可視性：非表示」ディスプレイ：なし 'を使用することを選択しますか？

visibility: hiddenとdisplay: none 。 visibility: hidden display: none ：なし：

レイアウトの保存：要素を非表示にする必要があるが、要素がまだそこにあるかのようにレイアウトを維持したい場合は、 visibility: hiddenを使用します。これは、特にレスポンシブデザインで、プレースホルダーの作成やページ上の一貫した構造を維持するのに役立ちます。
プログレッシブエンハンスメント：プログレッシブエンハンスメントを実装している場合、非表示のコンテンツから始めて、JavaScriptまたはCSSアニメーションで明らかになります。 visibility: hiddenコンテンツを最初に非表示にしているが、まだアクセスしやすく、レイアウトに影響を与えることを可能にします。
アクセシビリティの懸念：コンテンツを非表示にしたいが、画面リーダーからアクセスできるようにする場合（アクセシビリティ目的）、 visibility: hiddenは有益です。コンテンツは視覚的に隠されていますが、ドキュメントの流れの一部であり、支援技術によって読むことができます。
パフォーマンスの考慮事項：可視性を頻繁に切り替えるシナリオでは、 visibility: hidden display: noneが異なり、視認性が変更されるたびにレイアウトを再計算する必要がないため、よりパフォーマンスを発揮できます。