CSS の非表示プロパティについて話しましょう

CSS は Web サイトのデザインに不可欠な部分であり、その中の非表示プロパティは、必要に応じて特定の要素を非表示にするのに役立ちます。この記事では、CSS で非表示のプロパティを使用する方法と、実際のプロジェクトでこのプロパティを使用してより良いユーザー エクスペリエンスを実現する方法を紹介します。

1. CSS の非表示プロパティ

CSS には、display、visibility、opacity という 3 つの一般的な非表示プロパティがあります。

1. display 属性

display 属性は、次の値を含む要素の表示モードを制御するために使用されます:

• block: display要素 ブロックレベルの要素の場合、前後に改行が追加されます。
• none: 要素は表示されず、ページ上のスペースを占有しません。
• inline: 要素を前後に改行を入れずにインライン要素として表示します。
• inline-block: 要素をインライン ブロック要素として表示します。
• flex: 要素をフレキシブル コンテナとして表示します。
• grid: 要素をグリッド コンテナーとして表示します。

2. visibility 属性

visibility 属性は、次の値を含む要素の可視性を制御するために使用されます:

• visible : 要素が表示されます。
• hidden: 要素は表示されませんが、ページ上のスペースを占有します。
• collapse: 要素は折りたたまれており、テーブルの行と列に使用されます。

3. 不透明度属性

不透明度属性は要素の透明度を制御するために使用され、値の範囲は 0 (完全に透明) から 1 (完全に透明) です。不透明）。

2. 要素を非表示にするには

1. display:none を使用します

要素を非表示にする必要がある場合は、display:none を使用して非表示にすることができます。 。例:

#hide-me {
  display: none;
}

現時点では、id Hide-me の要素は表示されず、ページ上のスペースを占有しません。

2. visibility:hidden

ページ上の要素の位置とサイズを保持する必要があるが、非表示にしたくない場合は、次のようにすることができます。可視性:非表示を使用します。例:

#invisible {
  visibility: hidden;
}

この時点では、ID が非表示の要素は表示されませんが、ページ上のスペースは引き続き占有されます。

3. 不透明度:0 を使用する

要素を完全に透明にする必要があるが、ページ上のスペースを取りたい場合は、不透明度:0 を使用できます。例:

#transparent {
  opacity: 0;
}

この時点で、透明な ID を持つ要素は完全に透明になりますが、それでもページのスペースを占有します。

3. 実際のアプリケーションでの非表示

CSS で非表示属性を使用すると、実際のプロジェクトでより良いユーザー エクスペリエンスを実現できます。

1. 一時停止メニュー

一部の Web サイトでは、フローティング メニューがナビゲーションやその他の機能によく使用されます。ユーザーが特定の領域の上にマウスを置くと、その位置にメニューが表示されます。フローティング メニューが必要ない場合は、非表示にする必要があります。例:

#menu {
  display: none;
}

#hover-area:hover #menu {
  display: block;
}

ID hover-area の領域にマウスを置くと、ID メニューの要素が表示されます。

2. モーダル ボックス

Web ページでは、モーダル ボックスは、プロンプト情報やポップアップ広告などを表示するためによく使用されます。モーダルボックスが不要な場合は非表示にする必要があります。例:

#modal {
  display: none;
}

.button {
  cursor: pointer;
}

#myModal:target {
  display: block;
}

上記のコードでは、ボタンがクリックされると、ジャンプ先がアンカーポイントを介してID myModalのページ領域に設定され、モーダルボックスが表示されます。

3. レスポンシブ デザイン

モバイル デバイスの継続的な開発に伴い、レスポンシブ デザインは現代の Web サイト開発における重要な概念になっています。レスポンシブ デザインでは、Web サイトがモバイル デバイスでより適切に表示されるように、display:none を使用して特定の要素を非表示にすることが必要になることがよくあります。例:

@media only screen and (max-width: 480px) {
  #sidebar {
    display: none;
  }
}

上記のコードでは、画面幅が 480 ピクセル以下の場合、ID サイドバーを持つ要素は、モバイル デバイスの表示に適応するために非表示になります。

概要

この記事では、CSS の隠れたプロパティとその実際の応用例を紹介します。実際のプロジェクトでは、フローティング メニュー、モーダル ボックス、レスポンシブ デザインなどの機能を実装するために非表示属性がよく使用され、より良いユーザー エクスペリエンスを実現することができます。同時に、Web サイトへのアクセスと使用を維持するために非表示属性を使用する場合は、悪用しないように注意する必要があります。

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