CSSを使用して要素を非表示にする方法

CSS (Cascading Style Sheets) は、Web ページとスタイル要素のデザインに使用される言語です。含まれている機能の 1 つは要素の非表示です。これは Web レイアウトから要素を非表示にしますが、要素の位置とサイズは保持します。この記事では、CSSを使用して要素を非表示にする方法について説明します。

1. display:none

display:none 属性を使用して要素を完全に非表示にし、レイアウトから削除します。要素がスペースを占有している場合でも、レンダリングされません。この方法は、特定の条件下ですぐに表示できるように一部のコンテンツを非表示にする必要がある場合に適しています。 div、段落、画像、リストなどを含むあらゆる要素に適用できます。

たとえば、div 要素を非表示にし、必要なときに表示したいとします。

HTML:

<div>这是要隐藏的元素。</div>

CSS:

.hide-me {
  display: none;
}

上記の CSS では、 code 、 .hide-me はクラス名で、このクラスを使用するすべての要素は非表示になります。

2. visibility:hidden

visibility 属性は要素を非表示にできますが、要素はそのスペースと位置を保持し、他の要素と重なることがあります。この方法は、要素が非表示になっている間に要素のスペースと位置を保持する必要がある状況に適しています。 div、段落、画像、リストなどを含むあらゆる要素に適用できます。

たとえば、div 要素を非表示にし、必要なときに表示したいとします。

HTML:

<div>这是要隐藏的元素。</div>

CSS:

.hide-me {
  visibility: hidden;
}

上記の CSS では、 code 、 .hide-me はクラス名で、このクラスを使用するすべての要素は非表示になります。

3. opacity:0

不透明度プロパティは要素を完全に透明にしますが、そのスペースと位置は保持し、他の要素と重なることがあります。この方法は、要素を一時的に非表示にし、必要なときにすぐに表示する必要がある状況に適しています。

たとえば、div 要素を非表示にし、必要なときに表示したいとします。

HTML:

<div>这是要隐藏的元素。</div>

CSS:

.hide-me {
  opacity: 0;
}

上記の CSS では、 code 、 .hide-me はクラス名であり、このクラスを使用するすべての要素は透明になり、非表示になります。

4. height:0; width:0

画像を非表示にしたい場合は、height:0; width:0 属性を使用して画像をゼロにすることができます。サイズ。この方法は、要素全体を非表示にするのではなく、小さなアイコンやボタンを非表示にするためによく使用されます。たとえば、画像を非表示にしたい場合:

HTML:

<img  class="hide-me lazy" src="/static/imghwm/default1.png" data-src="example.jpg" alt="CSSを使用して要素を非表示にする方法" >

CSS:

.hide-me {
  height: 0;
  width: 0;
}

上記の CSS コードでは、.hide-me がクラス名です。画像は表示されません。

概要:

CSS を使用して要素を非表示にする場合、ニーズに応じてさまざまな方法を選択できます。要素を完全に非表示にしてスペースを確保したい場合は、display: none を使用します。要素を非表示にする必要があるがスペースを維持する必要がある場合は、visibility: hidden を使用します。必要なときに要素をすぐに表示したい場合は、opacity を使用します。 0、高さ: 0、幅: 0 属性。どの方法を選択しても、不要な要素をレイアウトから非表示にし、必要なときにすぐに表示できます。

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