css3で要素を非表示にする方法（2つの方法）

CSS3 の隠しテクノロジーにより、ページ レイアウトとコンテンツ表示を効果的に制御できます

Web ページ制作において、CSS3 は多くの優れたテクノロジーを提供し、開発者が Web ページのレイアウトとコンテンツ表示をより柔軟に制御できるようにします。その中でも、CSS3 隠蔽技術は、Web ページに表示する必要のない一部のコンテンツを非表示にすることで、ページをより簡潔かつ明確にし、より良いユーザー エクスペリエンスを提供する非常に重要な技術です。

1. 概要

Web ページでは、さまざまな状況に応じてページがコンテンツを動的に表示する必要があるか、特別なスタイル効果を実現する必要があるため、要素を非表示にすることは一般的な操作です。もちろん、Web ページ内の要素を非表示にしたい場合、従来のアプローチではその表示属性を none に設定します。ただし、この方法では要素を非表示にする効果は得られますが、非表示要素はページから完全に削除され、それが占有するレイアウト スペースも消滅するため、後で表示する必要がある場合はレイアウトを再構築する必要があります。無用なトラブルを引き起こす。

CSS3 には、可視性と不透明度という 2 つのプロパティがあり、ページから要素を削除せずに要素を非表示にすることができます。どちらのプロパティも要素の透明度を制御しますが、その効果は若干異なります。 Visibility 属性は要素を非表示にしてそのレイアウト スペースを保持できますが、opacity 属性は要素の透明度を制御して、要素が非表示であってもレイアウト スペースを保持できます。

2. 使い方

①. 可視属性を使って非表示にします

要素の可視属性を非表示または折りたたみに設定できます。このうち、非表示は要素を非表示にし、ページ上でそのレイアウト スペースを保持することを意味します。折りたたみはテーブル要素にのみ適用され、列または行を非表示にし、ページ上のレイアウト スペースを排除することを示します。

例として、要素を非表示にしてから表示するサンプルコードを以下に示します。

<style type="text/css">
    .hidden {
        visibility: hidden;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.visibility = &#39;visible&#39;">显示</button>

このサンプルコードでは、対象要素の可視性属性を最初に非表示に設定していますが、レイアウトスペースはページ内に残ります。その後、JavaScript を介して要素の可視性プロパティを可視に設定することで、ページ上に要素を再表示できます。

②. opacity 属性を使用して要素を非表示にする

opacity 属性を使用して要素を非表示にするには、要素の透明度を 0 に設定する必要があります。こうすることで、要素が表示されない場合でも、そのレイアウト スペースがページ上に保持されます。同様に、JavaScript を使用して要素の透明度を 1 に設定し、ページ上に再表示することができます。

たとえば、次は要素を非表示にしてから表示するサンプル コードです。

<style type="text/css">
    .hidden {
        opacity: 0;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.opacity = 1">显示</button>

このサンプル コードでは、まず対象の要素の不透明度属性を 0 に設定します。それは非表示になり、ページ上のレイアウト スペースは保持されます。その後、JavaScript で不透明度プロパティを 1 に設定することで、要素を再度表示できます。

3. 概要

Web ページ制作において、要素を非表示にすることは非常に一般的な操作です。要素を非表示にする従来の方法では、通常、ページ上に不要なレイアウト、スタイル、その他の問題が発生します。 CSS3 非表示テクノロジは、可視性と不透明度という 2 つの属性を提供します。これにより、要素を非表示にしてレイアウト スペースを保持し、より効率的でシンプルなページ レイアウトとコンテンツの表示効果を実現できます。

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