非表示を実装するCSS

CSS (Cascading Style Sheets) は、Web ページのスタイルとレイアウトを制御するために使用される言語です。 Web ページを構築するとき、多くの場合、CSS を使用して、フォント、背景色、境界線などの要素のスタイルを定義する必要があります。 CSS には、非表示を含む要素の表示モードを制御できる、display という魔法の属性もあります。

なぜ要素を非表示にする必要があるのでしょうか?たくさんのシーンがあります。たとえば、複数のタブを含むページを作成する場合、現在選択されているタブのコンテンツのみを表示し、他のタブのコンテンツを最初に非表示にしたい場合があります。別の例として、クリックしたときに要素を非表示にすることができる閉じるボタンをページに追加する必要がある場合があります。

次に、CSSで要素を非表示にするいくつかの方法を詳しく紹介します。

1. 表示属性

display は、要素の表示モードを制御するために CSS で最も一般的に使用される属性です。デフォルトでは、すべての要素が表示されます。要素を非表示にしたい場合は、表示属性を変更することで非表示にできます。次に、表示属性のいくつかの値を示します。

1. none

要素を非表示にし、ドキュメント フローから削除します。つまり、要素は使用されません。空間。これは、非表示の要素がページ レイアウトに影響を与えなくなることを意味します。

サンプルコード:

.hide {
  display: none;
}

2. block

要素をブロックレベルの要素に変換して表示します。ブロック レベルの要素は独自の行を占有し、幅と高さが設定されており、他のブロック レベルの要素およびインライン要素を収容できます。

サンプルコード:

.show {
  display: block;
}

3. inline

要素をインライン要素に変換して表示します。インライン要素は 1 行を占有しません。幅と高さはコンテンツによって決まり、他のインライン要素のみを収容できます。

サンプルコード:

.show {
  display: inline;
}

4. inline-block

要素をインラインブロックレベルの要素に変換して表示します。インラインのブロックレベル要素には、ブロックレベル要素で幅と高さを設定でき、インライン要素で他のインライン要素を収容できるという特性があります。

サンプルコード:

.show {
  display: inline-block;
}

2. 可視性属性

可視性属性は、要素の表示モードを制御するために使用することもできます。表示とは異なり、可視性を使用して要素を非表示にした後も、要素はスペースを占有しますが、表示されなくなります。次に、visibility 属性のいくつかの値を示します。

1. visible

要素は表示され、配置方法に従って表示されます。

2. hidden

要素は表示されませんが、スペースを占有します。 display:none とは異なり、要素の幅と高さは引き続き有効です。

3. collapse

テーブル要素の場合、要素の境界線とパディングは無視され、テーブル行がテーブルがないように見えます。

サンプルコード:

.hide {
  visibility: hidden;
}

3. 不透明度属性

不透明度属性は、要素が徐々に消える効果を実現できます。値は 0 ～ 1 で、要素の透明度を示します。

1. 0

完全に透明、つまり要素は見えません。

2. 1

完全に不透明、つまり要素が完全に表示されます。

3. 0.5

半透明、つまり、要素は部分的に表示され、部分的に非表示になります。

透明度が 0 の場合、要素は非表示になるだけでなく、スペースも占有しません。ただし、不透明度を使用して要素を非表示にする場合は注意してください。要素は非表示に見えても、実際にはまだ存在します。要素をスペースを取らずに非表示にしたい場合は、display:none や Visibility:hidden などの他のメソッドと組み合わせる必要があります。

サンプル コード:

.hide {
  opacity: 0;
}

上記の 3 つの方法により、要素を非表示にして、パーソナライズされたデザイン要件を実現できます。画像などのダウンロード可能な要素については、隠して知的財産権を保護するのは安全ではないため、保護するには他の技術を使用する必要があることに注意してください。

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