CSS では、要素を非表示にする (つまり、画面内で目に見えないようにする) 方法が多数あり、スペースを占有するものもあれば、スペースを占有しないものもあり、クリックに応答できるものもあれば、クリックに応答できないものもあります。では、これらの CSS メソッドは非表示要素をどのように実装するのでしょうか、またそれらの違いは何でしょうか。この章では、CSSでページ要素を非表示にする方法を紹介します。 CSS隠し要素の4つの実装方法とその違い（コード例）。困っている友人は参考にしていただければ幸いです。
1. CSS での非表示要素の 4 つの実装
1. 可視性: 非表示、要素を非表示に設定します
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--visibility: hidden</title>
<style>
.demo{
width: 800px;
height: 200px;
margin: 50px auto;
}
span{
visibility: hidden;
}
</style>
</head>
<body>
<div class="demo">
<p>元素隐藏1--visibility: hidden,元素隐藏2--visibility: hidden,元素隐藏3--visibility: hidden</p>
<p>元素隐藏1--visibility: hidden,<span>元素隐藏2--visibility: hidden</span>,元素隐藏3--visibility: hidden</p>
</div>
</body>
</html>レンダリング:
可視性属性は、要素が表示されます。値を hidden に設定すると、要素が視覚的に非表示になるだけです。非表示要素自体は独自の位置を占め、Web ページのレイアウトに影響を与えます。
2. 不透明度: 0、要素を非表示に設定します
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
.demo{
width: 800px;
height: 200px;
margin: 50px auto;
}
span{
opacity: 0;
}
</style>
</head>
<body>
<div class="demo">
<p>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</p>
<p>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</p>
</div>
</body>
</html>レンダリング:
opacity 属性は、要素の透明度を設定することを意味します。要素の境界ボックスを変更するようには設計されていません。これは、不透明度を 0 に設定すると、要素が視覚的に非表示になるだけであることを意味します。要素自体は引き続き独自の位置を占め、Web ページのレイアウトに貢献します。これは、上記の「visibility: hidden」に似ています。
3. display:none、要素を非表示に設定します
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--display:none</title>
<style>
.demo{
width: 800px;
height: 200px;
margin: 50px auto;
}
span{
opacity: 0;
}
</style>
</head>
<body>
<div class="demo">
<p>元素隐藏--display:none,元素隐藏--display:none,元素隐藏--display:none</p>
<p>元素隐藏--display:none,<span>元素隐藏--display:none</span>,元素隐藏--display:none</p>
</div>
</body>
</html>レンダリング:
display 属性は、単語の意味に従って要素を実際に非表示にします。表示属性を none に設定すると、要素は表示されなくなり、ボックス モデルも生成されなくなります。この属性を使用すると、非表示の要素はスペースを占有しません。それだけでなく、display が none に設定されると、要素に対するユーザーの直接対話操作は無効になります。
4. 位置: 絶対、要素を非表示に設定します
コード実装:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--position: absolute</title>
<style>
.demo{
width: 800px;
height: 200px;
margin: 50px auto;
}
span{
position: absolute;
top: -9999px;
left: -9999px;
}
</style>
</head>
<body>
<div class="demo">
<p>元素隐藏1--position: absolute,元素隐藏2--position: absolute,元素隐藏3--position: absolute</p>
<p>元素隐藏1--position: absolute,<span>元素隐藏2--position: absolute</span>,元素隐藏3--position: absolute</p>
</div>
</body>
</html>レンダリング:
位置: 絶対、要素を非表示に設定します 主な原則は、上と左を設定することです十分な大きさの要素を指定します。負の数を指定すると、画面上で非表示になります。
2. 違い
1. 可視性: 非表示
要素は非表示になりますが、消えることはなく、引き続きスペースを占有します。
は非表示にした後も子孫に継承され、visible を設定することで再表示することもできます。
はこのイベントをトリガーしません。このプロパティを動的に変更すると再描画が発生します。
2. 不透明度:0
透明度のみが 100% であり、要素は非表示になっていますが、依然としてスペースを占有します。
は非表示にしても元の HTML スタイルは変更されず、子要素は継承されません。 opacity=1 Hidden によって反転されます。
opacity:0 の要素でもバインドされたイベントをトリガーできます。
3. display:none
はスペースを占有せず、要素を非表示にするため、この属性を動的に変更すると再配置 (ページ レイアウトの変更) が発生します。これは、ページから要素を削除することと理解できます。子孫があっても、それらはすべて一緒に隠されているため、その子孫は表示されません。
以上がCSSでページ要素を非表示にする方法は？ CSS隠し要素の4つの実装方法とその違い（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
Dreamweaver Mac版
ビジュアル Web 開発ツール
WebStorm Mac版
便利なJavaScript開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
