CSS 隠し要素 隠し

CSS の非表示要素の非表示

要素の非表示は、Web サイトのデザインおよび開発時によく使用される手法です。場合によっては、ページ上の不要なコンテンツを非表示にしたり、必要に応じていくつかの要素を表示したりすることが必要な場合があります。 CSS の非表示要素隠蔽テクノロジーを使用すると、これが簡単かつエレガントになります。

この記事では、CSS で要素を非表示にする 2 つの方法、display 属性と Visibility 属性を紹介します。

display 属性を使用して要素を非表示にする

display 属性は、要素の外観と動作を制御します。多くの値を取ることができますが、ここではそのうちの 3 つ (block、inline、none) にのみ焦点を当てます。

表示属性の値が block の場合、要素はページ上にブロック レベルの要素として表示されます。ブロックレベルの要素は常に新しい行で始まり、使用可能な幅全体を占めます。これは、同じ行の要素を新しい行にプッシュすることを意味します。

表示属性の値が inline の場合、要素はページ上にインライン要素として表示されます。インライン要素はテキストの流れを中断しませんが、テキストの現在の行内に表示されます。必要な幅だけを取り、改行を強制しません。

表示属性の値が none の場合、要素はページから削除され、占有されていたスペースは保持されません。これは、display:none を使用すると要素を完全に非表示にすることができ、他の要素が要素の元の位置を自動的に埋めることを意味します。

ここでは、display 属性を使用して要素を非表示にする方法を示すサンプル コードをいくつか示します。

.hide {
  display: none;
}

.hide-block {
  display: block;
  height: 0;
  overflow: hidden;
}

.hide-inline {
  display: inline;
  visibility: hidden;
}

上記のコードでは、コードの最初の部分では、display:none を使用して要素を完全に非表示にしています。 2 番目のコードは、display:block と height:0 を使用してブロック レベル要素の高さを 0 に設定し、overflow:hidden を使用して結果として生じる問題を修正します。 3 番目のコードでは、display:inline と Visibility:hidden を使用して、インライン要素の幅を 0 に設定しますが、インライン要素が占有するスペースはそのまま保持します。

visibility 属性を使用して要素を非表示にする

visibility 属性を使用して要素を非表示にすることもできます。これには、表示と非表示の 2 つの値があります。

visibility 属性の値が可視の場合、要素はページ上に通常の要素として表示されます。可視性プロパティはデフォルトで可視に設定されます。

visibility 属性の値が非表示の場合、要素はページ上に表示されませんが、要素が占有するスペースは保持されます。つまり、要素は表示されませんが、ページのレイアウトは影響を受けません。

これは、visibility 属性を使用して要素を非表示にする方法を示すサンプル コードです:

.invisible {
  visibility: hidden;
}

上記のコードは、visibility:hidden を使用して要素を非表示にしますが、要素が占有するスペースは保持します。 。

概要

CSS を使用して要素を非表示にすることは、Web サイトの設計および開発の一般的な手法です。 CSS の表示プロパティと可視プロパティを使用すると、要素を簡単に非表示にし、必要に応じて再度表示することができます。要素を完全に非表示にするには、display:none を使用します。一方、visibility:hidden を使用すると、要素は非表示になりますが、要素が占有するスペースは保持されます。実際の開発では、ページのアクセシビリティやユーザー エクスペリエンスに影響を与えないよう、CSS の非表示要素を注意して使用する必要があります。

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