CSSの要素を非表示にする10の方法-CSSチュートリアル-php.cn

CSS要素の隠蔽方法とパフォーマンスの比較の詳細な説明

10 Ways to Hide Elements in CSS

CSSは、要素を非表示にするさまざまな方法を提供しますが、アクセシビリティ、レイアウト、アニメーション、パフォーマンス、イベント処理への影響はさまざまです。この記事では、これらの方法について詳細に説明し、その利点と短所を分析します。

キーポイント

CSSには、要素を隠すさまざまな方法があり、それぞれがアクセシビリティ、レイアウト、アニメーション、パフォーマンス、イベント処理に異なる影響を与えます。
opacityおよびfilter: opacity()プロパティは、要素を完全に透明にすることができますが、要素はページ上に残り、イベントを引き起こす可能性があります。
transform属性は、要素を画面から移動するか、スケールを削減し、優れたパフォーマンスとハードウェアアクセラレーションを提供することで、要素を非表示にすることができます。
display属性は要素を非表示にする一般的な方法ですが、アニメーション化することはできず、ページのレイアウトをトリガーすることができるため、多くの場合理想的ではありません。
要素を隠す他の方法には、HTML hiddenプロパティ、絶対的な位置付け、他の要素の上書き、サイズの削減など、それぞれに独自の利点と短所があります。

アニメーションエフェクト

いくつかのCSS隠されたオプションはすべてまたは何もありません。要素は、中間状態なしでは、完全に見えるか、完全に見えないいずれかです。透明性などの他のオプションはさまざまな値を持つことができるため、補間CSSアニメーションを実装できます。

アクセシビリティ

以下に説明する各方法は、視覚的に要素を隠しますが、支援技術の要素内容を非表示にしない場合があります。たとえば、スクリーンリーダーはまだ小さな透明なテキストを発表できます。適切な操作を記述するには、さらなるCSS属性またはARIA属性（例：aria-hidden="true"）が必要になる場合があります。

アニメーションは、一部の人々が見当識障害、片頭痛、発作、またはその他の身体的不快感を経験する可能性があることに注意してください。ユーザー設定で指定されたときにアニメーションをオフにするために、prefers-reduced-motionメディアクエリを使用することを検討してください。

イベント処理

要素を隠すことで、イベントがその要素にトリガーされるのを防ぐか、効果がありません。つまり、要素は表示されませんが、他のユーザーインタラクションによってクリックまたは受信することもできます。

パフォーマンス

ブラウザがHTML DOMおよびCSSオブジェクトモデルをロードして解析した後、ページは3つの段階で表示されます。

合成の変化のみを引き起こす効果は、レイアウトに影響するよりも大幅にスムーズです。場合によっては、ブラウザはハードウェアアクセラレーションを使用することもできます。

1 opacityおよびfilter: opacity()プロパティは、それぞれ完全な透明度と総不透明度を表す、0〜1の間で数値、またはそれぞれ0％から100％の割合を渡すことができます。

例を表示

最新のブラウザでは、2つの間にほとんど実用的な違いはありませんが、複数の効果を同時に適用する場合（ファジー、コントラスト、グレースケールなど）、filterを使用する必要があります。

opacityはアニメーション化して優れたパフォーマンスを提供できますが、完全に透明な要素がページに残り、イベントをトリガーできることに注意してください。

指标	效果
浏览器支持	良好，但IE仅支持opacity 0到1
可访问性	如果设置为0或0%，则内容不会被读取
布局影响	否
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	是

は要素全体に影響しますが、

、opacity、colorプロパティも個別に設定できます。 background-colorまたは同様の方法を使用してゼロアルファチャネルを適用すると、プロジェクトが完全に透明になります。 border-color rgba(0,0,0,0)

例を表示

各属性を個別にアニメーション化して、興味深い効果を作成できます。

または同様の方法を使用して生成されない限り、画像バックグラウンドの要素に透明性を適用できないことに注意してください。

linear-gradientアルファチャネルは、次の方法を使用して設定できます。

：完全に透過的です（中間アニメーションは実行できません）

transparent：赤、緑、青、アルファ
rgba(r, g, b, a)：色相、飽和、明るさ、アルファ
hsla(h, s, l, a)および

#RRGGBBAA #RGBA

3 transformプロパティを使用して、要素をパン（mov）、拡張、回転、または傾斜させることができます。

または

（画面から出る）は要素を非表示にします：transform scale(0)translate(-999px, 0px)例を表示

要素は実際には別のレイヤーに移動し、2Dまたは3Dでアニメーション化できるため、優れた性能とハードウェアアクセラレーションを提供します。元のレイアウトスペースは同じままですが、完全に隠された要素はイベントをトリガーしません。

transform

指标	效果
浏览器支持	良好
可访问性	内容仍然会被读取
布局影响	否——原始尺寸保持不变
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	否

プロパティ要素のどの部分が表示されているかを決定するクリップ領域を作成します。 のような値を使用すると、要素が完全に非表示になります。 clip-path

例を表示

clip-path clip-path: circle(0);

は、最新のブラウザでのみ使用できますが、興味深い範囲のアニメーションを提供します。

clip-path属性は、要素を表示および非表示にするために

または

指标	效果
浏览器支持	仅限现代浏览器
可访问性	一些应用程序仍然可以读取内容
布局影响	否——原始尺寸保持不变
渲染需求	绘制
性能	合理
动画帧	是，在现代浏览器中
隐藏时触发事件	否

に設定できます。

visibility例を表示

visibility値が使用されない限り、要素で使用されるスペースはそのまま残ります。 visible hidden

6 display属性は、おそらく要素を隠す最も一般的に使用される方法です。

値は、要素がDOMに存在しないかのように効果的に削除します。

displaynone例を表示

しかし、ほとんどの場合、それはおそらく最悪のCSSプロパティです。要素がドキュメントストリームから移動されない限り、アニメーション化してトリガーページレイアウトをトリガーすることはできません。

も過負荷であり、position: absolute、contain、

、

、display、blockなどのオプションがあります。 inlineの後に正しい値に戻るのは面倒です（ただし、tableが役立つ場合があります）。 flexbox grid display: none;unset7

html

指标	效果
浏览器支持	极佳
可访问性	内容不会被读取
布局影响	是
渲染需求	布局
性能	差
动画帧	否
隐藏时触发事件	否

属性を任意の要素に追加できます：

hiddenこれにより、ブラウザのデフォルトスタイルが適用されます：

これには、hiddenと同じ利点と短所がありますが、スタイルの変更を許可しないコンテンツ管理システムを使用する場合に役立ちます。

<p hidden>隐藏内容</p>

ログイン後にコピー

[hidden] {
  display: none;
}

ログイン後にコピー

属性は、

、display: none、

、

を使用して、ページレイアウトのデフォルトの静的位置から要素を移動できるようにします。したがって、絶対に配置された要素は、または同様の方法を使用して画面から移動できます。

例を表示positiontop bottom

9他の要素をカバーします 要素は、上の背景と同じ色の別の要素を配置することで視覚的に隠すことができます。この例では、子供の要素を使用できますが、

pseudo-elementが上書きされます。

::after

例を表示

指标	效果
浏览器支持	极佳
可访问性	内容仍然会被读取
布局影响	否，如果绝对定位
渲染需求	绘制
性能	如果小心谨慎，则性能合理
动画帧	是，当覆盖伪元素或子元素时
隐藏时触发事件	是，当覆盖伪元素或子元素时

10 要素のサイズを最小限に抑えるために、

、、、

、

、width、および/またはheightを使用して要素を隠すことができます。また、コンテンツがオーバーフローしないことを確認するには、paddingを適用する必要があります。 border-width font-sizeoverflow: hidden例を表示

は興味深いアニメーションを実現できますが、パフォーマンスはよりも大幅に優れています。

transform

隠された要素の選択

指标	效果
浏览器支持	极佳
可访问性	内容仍然会被读取
布局影响	是
渲染需求	布局
性能	差
动画帧	是
隐藏时触发事件	否

何年もの間、は隠された要素に好ましいソリューションでしたが、より柔軟でアニメーションの方が簡単なオプションに置き換えられています。それでも機能しますが、すべてのユーザーのコンテンツを永久に非表示にする場合にのみ使用できます。パフォーマンスを検討するとき、

または

はより良い選択です。 display: none transformopacity（CSSを使用して画像を表示および非表示にする方法に関するクールなデモリンクは、ここに挿入する必要があります）

faq

（FAQセクションをここに挿入し、元のコンテンツに従って調整および補充する必要があります。元のFAQセクションをより明確な構造に再編成し、より単純な言語で表現することをお勧めします。）

要するに、要素を非表示にする方法は、特定のアプリケーションのシナリオと要件に依存し、パフォーマンス、アクセシビリティ、アニメーション効果などの要因を比較検討する必要があります。 およびは通常、より良いパフォーマンスのオプションですが、

は、アクセスする必要のない永久的な隠しコンテンツに適しています。常にアクセシビリティとユーザーエクスペリエンスを優先することを忘れないでください。

以上がCSSの要素を非表示にする10の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。