CSSの表示と非表示

Web デザインでは、要素の非表示と表示は非常に一般的な要件です。要素の表示と非表示を切り替えるには、通常、CSS の表示プロパティを使用します。この記事では、CSS でよく使用される非表示と表示の方法を紹介します。

1. CSS の表示属性

表示属性は、CSS で最もよく使用される属性の 1 つで、要素の表示または非表示を制御したり、要素の表現を変更したりすることができます。 。表示属性には多くの値がありますが、ここでは一般的に使用されるいくつかの値のみを紹介します。

1. display: none

display:none は要素を非表示にする最も一般的に使用される方法で、ドキュメント フローから要素を完全に削除し、スペースを占有しません。ブラウザーで要素の HTML コードを表示しても、非表示の要素は表示されません。 display:none を使用する利点は、レイアウトを変更せずに要素を非表示にできることと、要素がスペースを占有しないことです。

たとえば、次の CSS コードを使用して要素を非表示にできます:

div {
  display: none;
}

2. display: block

display:block が最も一般的に使用されます。要素を表示するメソッド。ブロック要素は新しい行で始まり、親要素の幅全体を占めます。幅と高さを設定でき、デフォルトでインライン要素とテキスト ノードに対応できます。

たとえば、次の CSS コードは div 要素をブロック要素に設定します。

div {
  display: block;
}

3. display: inline

display:inline は、次のようになります。要素は inline で表示され、隣接する要素として表示されます。テキストの前後に新しい行を開始するのではなく、他の要素と行を共有します。要素の幅と高さを設定しますが、自動的に折り返すことはありません。

たとえば、次の CSS コードを使用して、span 要素をインライン要素に設定できます:

span {
  display: inline;
}

4. display: inline-block

display:inline- ブロックを使用すると、要素にインラインの特性 (要素は新しい行を開始しません) とブロックの特性 (幅と高さを設定できる) を持たせることができます。これは、次のようなレイアウト効果を実現するためによく使用されます。グラフィックとテキストの混合効果。

たとえば、次の CSS コードを使用して、div 要素を inline-block 要素に設定できます:

div {
  display: inline-block;
}

2. CSS

の可視性属性に加えて、 display 属性には、要素の表示と非表示に使用できる一般的に使用される属性もあります。それが、visibility 属性です。 Visibility 属性は要素の可視性を制御するために使用され、visible (デフォルト値、要素が表示される) と hidden (要素が非表示になる) の 2 つの値に設定できます。

1. visibility:visible

visibility:visible はデフォルト値であり、要素を可視にする値です。これは、display:block または display:inline の場合と非常に似ています。ただし、visible:visible を持つ要素はドキュメント内での位置を維持し、display:block や display:inline を持つ要素のように CSS レイアウトの影響を受けません。要素が非表示になっている場合でも、JavaScript またはその他の手法を使用して要素の位置とサイズを取得できます。

たとえば、次の CSS コードは div 要素を表示状態に設定します。

div {
  visibility: visible;
}

2. visibility: hidden

visibility: hidden はオプションです。要素の値を非表示にします。これは、display:none と同じ効果がありますが、ドキュメント フローから要素を削除する代わりに、要素のスペースを保持します。したがって、要素が非表示になっている場合でも、他の要素がその位置を引き継ぎ、その要素によってトリガーされるイベントやアニメーションは引き続き機能します。

たとえば、次の CSS コードは div 要素を非表示の状態に設定します:

div {
  visibility: hidden;
}

3. CSS

の不透明度属性は、表示と可視性の使用に加えて、要素を非表示または非表示にする属性 表示に加えて、不透明度属性を使用して要素の透明度を調整することもできます。

1. opacity: 1 (不透明度)

opacity: 1 は要素のデフォルト値です。これは、要素が完全に不透明であること、つまり何もできないことを意味します。要素を通して見ると以下の内容になります。

たとえば、次の CSS コードは不透明な div 要素を設定します。

div {
  opacity: 1;
}

2. opacity: 0 (完全に透明)

opacity: 0 は、要素 完全に透明です。つまり、要素を通して背景が完全に表示されます。実際には、不透明度: 0 は要素を非表示にし、要素のフットプリントを保持するためによく使用されます。

たとえば、次の CSS コードは完全に透明な div 要素を設定します:

div {
  opacity: 0;
}

3. opacity: 0.5 (半透明)

opacity: 0.5要素が半透明であることを意味します。つまり、背景は要素を通して見えますが、要素のコンテンツはまだ見ることができます。

たとえば、次の CSS コードは半透明の div 要素を設定します。

div {
  opacity: 0.5;
}

概要

この記事では、表示と可視性を含め、CSS で一般的に使用される非表示と表示の方法を紹介します。プロパティと不透明度プロパティ。実際の開発では、特定のニーズに応じて要素を非表示にしたり表示したりするためのさまざまな方法を選択できます。この記事があなたのお役に立てば幸いです。

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