CSSで要素を非表示にする方法にはどのようなものがありますか? CSS で要素を非表示にする 4 つの一般的な方法の紹介

Web 開発のプロセスでは、特定の要素を非表示にし、必要に応じて表示する必要があることがよくあります。では、CSS で要素を非表示にする方法は何でしょうか。この記事ではCSSで要素を非表示にする方法を紹介します。

CSS を使用してページ要素を非表示にする方法はたくさんあります。不透明度を 0 に、可視性を非表示に、表示をなし、または位置を絶対に設定してから、位置を非表示領域に設定するなどの設定ができます。ページ要素を非表示にするためのこれらの CSS 属性の具体的な内容を詳しく見てみましょう。

要素を非表示にする CSS メソッド: 不透明度属性を使用する

不透明度属性とは、オブジェクトの透明度が 0 の場合、視覚的なオブジェクトの不透明度を取得または設定することを意味します。これは消えましたが、依然としてその位置を占めており、Web ページのレイアウトに役割を果たしています。ユーザーのインタラクションにも応答します。不透明度属性が追加された要素の場合、背景と要素の内容もそれに応じて変更されます。

.hide {
  opacity: 0;
}

説明: 不透明度プロパティを使用すると、優れたアニメーション効果を実現できます。

注: この属性は IE9 以降のブラウザと互換性があります。IE8 以前のバージョンでは、代替フィルター属性 (filter:Alpha(opacity=50) など) がサポートされています。

要素を非表示にする Css メソッド 2: 表示属性を使用する

要素の表示属性が none の場合、表示属性は実際の非表示要素です。視界から消えてしまい、ボックスモデルも生成されなくなり、さらにその子要素も一緒にボックスモデルから消えてしまいます。

.hide {
   display: none;
}

注: これとその子要素に追加されたアニメーション効果やインタラクティブ効果は機能しません。

要素を非表示にする CSS メソッド 3: 可視性属性を使用する

可視性属性は、属性値が非表示の場合、要素は非表示になります。独自の位置を制御し、Web ページのレイアウトに影響を与えます。不透明との唯一の違いは、ユーザーの操作に応答しないことです。さらに、要素は画面読み上げソフトウェアで非表示になります。

.hide {
   visibility: hidden;
}

注: この属性は、初期状態と終了状態が異なる限り、アニメーション効果を実現することもできます。これにより、表示状態の切り替え間の遷移アニメーションが時間的にスムーズになります。

要素を非表示にする CSS メソッド 4:position 属性の使用

position 属性の意味は、要素をドキュメント フローおよびビジュアルの外に移動することです。この属性を追加しても、要素は操作可能のままですが、レイアウトには影響しません。この属性を適用すると、主に、特定の値に到達して現在のページを離れる方向 (上、左、右、下) を制御できます。

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

注: このメソッドを使用してフォーカス可能な要素を非表示にすると、ユーザーがその要素にフォーカスの切り替えを許可したときに使用不可エラーが発生するため、使用しないでください。 。この方法は、カスタム チェックボックスやラジオ ボタンを作成するときによく使用されます。

最後に: 不透明度、表示、可視性、位置の上記 4 つの属性の詳細については、css マニュアル を参照してください。

以上がCSSで要素を非表示にする方法にはどのようなものがありますか? CSS で要素を非表示にする 4 つの一般的な方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。