CSS で隠し要素を実現する 7 つの興味深い方法
序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面接で常によくある質問です。
要素を非表示にできる display、visibility、opacity 属性に加えて、要素を非表示にできる他の属性はありますか?彼らの間にはどんな必然的なつながりがあるのでしょうか?今日はそれについてお話しします。 注: スペースが限られているため、この記事では filter:alpha(opacity=0); zoom:0; などの互換性のあるプロパティについては説明していません。 まず、アクセシビリティツリーから削除する
display プロパティでは、要素の内部および外部の表示タイプを設定できます。 display を none に設定すると、要素がアクセシビリティ ツリーから削除されます。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>表示: なし</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
表示: なし;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
2番目のタイプ: 隠し要素
visibility を hidden に設定すると要素は非表示になりますが、要素はアクセシビリティ ツリー内に残ります (display: none が設定されている場合、要素はアクセシビリティ ツリーから削除されます)。また、クリック イベントを登録しても効果はありません。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>可視性: 非表示</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
可視性: 非表示;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>3番目のタイプ: 透明
opacity（不透明度）、値の範囲は0（完全に透明）〜1（完全に不透明）です。opacityを0に設定すると、要素は完全に透明になります。このとき、要素は見えません（透明なため）が、アクセシビリティツリーにはまだ存在し、登録されたクリックイベントは有効です。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>不透明度: 0</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
不透明度: 0;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html> 要素の背景色、色、境界線の色を透明に設定します。要素は透明であるため見えなくなりますが、アクセシビリティ ツリーにはまだ存在し、登録されたクリック イベントは有効です。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>透明</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
色: 透明;
背景色: 透明;
境界線の色: 透明;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
技術的には、transparent は rgba(0,0,0,0) の省略形であり、要素の背景色、色、境界色を rgba(0,0,0,0) (透明) に設定します。この時点では、要素は表示されません (透明なため) が、アクセシビリティ ツリーにはまだ存在し、登録されたクリック イベントは有効です。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>rgba(0,0,0,0)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
色: rgba(0,0,0,0);
背景色: rgba(0,0,0,0);
境界線の色: rgba(0,0,0,0);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
rgba では、要素を非表示にする効果を得るために、4 番目のパラメータを 0 にするだけで済みます。 hsla が使用する要素の非表示メカニズムは rgba と一致しており、4 番目のパラメータ Alpha によって制御されます。要素の背景色、色、境界色は hsla (0, 0%, 0%, 0) に設定されます。この時点では、要素は見えません (透明なため) が、アクセシビリティ ツリーにはまだ配置されており、登録されたクリック イベントは有効です。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>hsla(0,0%,0%,0)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
色: hsla(0,0%,0%,0);
背景色: hsla(0,0%,0%,0);
境界線の色: hsla(0,0%,0%,0);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
hsla と rgba は同じであり、要素を非表示にする効果を得るには 4 番目のパラメータのみを 0 にする必要があります。 フィルターの不透明度 (0% ~ 100%) は、画像の透明度を変換します。値の範囲は 0% (完全に透明) ~ 100% (完全に不透明) です。要素のフィルターを不透明度 (0%) に設定します。要素は透明であるため見えなくなりますが、アクセシビリティ ツリーにはまだ存在し、登録されたクリック イベントは有効です。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>フィルター: 不透明度(0%)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
フィルター: 不透明度(0%);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリック');
})
</スクリプト>
</本文>
</html>4番目: ズーム
transform を scale(0, 0) に設定すると、要素は x 軸と y 軸の両方で 0 ピクセルに拡大縮小されます。要素は表示され、位置を占めますが、0% に拡大縮小されているため、要素とそのコンテンツが占めるピクセル比は 0*0 となり、要素とそのコンテンツは表示されず、クリックもできません。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>変換: スケール(0, 0)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
変換: スケール(0,0);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
幅と高さの両方を 0 に設定すると、要素は 0*0 のピクセル比を占めますが、この時点で次の 2 つの状況が発生します。 このメソッドと transform: scale(0,0) の違いは、transform: scale(0,0) は要素とそのコンテンツの両方を拡大縮小するのに対し、このメソッドは要素を 0px に拡大縮小してから要素の外側のコンテンツを切り取ることです。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>幅: 0;高さ: 0;オーバーフロー: 非表示</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
幅:0;
高さ:0;
オーバーフロー: 非表示;
border-width: 0;/* ユーザーエージェントスタイルシートでは border-width: 2px; */
padding: 0;/* ユーザーエージェントスタイルシート padding: 1px 6px; */
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>5番目: ローテーション
要素を非表示にするには、要素を X 軸に沿って時計回りに 90 度回転させます。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>変換: rotateX(90deg)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
変換: rotateX(90deg);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリック');
})
</スクリプト>
</本文>
</html> 要素を非表示にするには、要素を Y 軸に沿って時計回りに 90 度回転させます。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>変換: rotateY(90deg)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
変換: rotateY(90deg);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリック');
})
</スクリプト>
</本文>
</html>
6番目のタイプ: オフスクリーン表示位置要素を画面外に移動して非表示にすることもできますが、この効果を実現するには CSS スタイルが多すぎます。ここでは例のみを示します。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>オフスクリーン表示位置</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
位置: 固定;
上: -100px;
左: -100px;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>7番目: カバー要素マスクを使用して要素を非表示にすることもできます。この効果を実現するための CSS スタイルは多数あるため、ここでは例のみを示します。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>表紙</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
Zインデックス: -1;
位置: 絶対;
上位: 50%;
左: 50%;
変換: translate(-50%,-50%);
}
＃カバー {
zインデックス: 1;
位置: 絶対;
上: 0;
左: 0;
マージン: 0;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div style="position: relative;line-height: normal;">
<button id="bt">ボタン</button>
<div id="カバー"></div>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>参照する
これで、CSS で隠し要素を実装する 7 つの興味深い方法についての記事は終了です。CSS 隠し要素に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 |
>>: ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?
推薦する
JavaScript のドキュメント オブジェクト モデル (DOM)
目次1. DOMとは何か2. 要素を選択する3. getElementById() 4. クエリセレ...
MySQL バックアップ スクリプトの書き方
序文：データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...
Dockerコンテナでは、イメージを簡素化してサイズを縮小する方法を詳しく説明しています
目次1.画像レイヤーの数を減らす1. 命令の統合2. 多段階ビルド3. スクワッシュ機能を有効にする...
Vueコンポーネント登録方法の解釈
目次概要1. グローバル登録2. 現地登録3. モジュールシステムへのローカル登録概要コンポーネント...
mysql57サービスが突然消えた問題をすぐに解決する
1つ、 G:\MySQL\MySQL Server 5.7\bin> mysqld --ini...
Linuxファイルの基本属性の知識ポイントのまとめ
Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...
写真をアップロードして顔を認識する Vue+axios サンプルコード
目次Axios リクエストQs処理データ分析Vantアップロードファイル形式完全なコードこの記事では...
VirtualBox CentOS7.7.1908 Python3.8 ビルド Scrapy 開発環境 [グラフィックチュートリアル]
目次環境CentOSをインストールするyum 国内ミラーソースを構成するサードパーティの依存関係をイ...
protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル
protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...
CSS 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明
CSS は Web ページで非常に重要な役割を果たします。近年の CSS の発展に伴い、疑似要素/疑...
Mac VMware Fusion CentOS7 静的 IP 構成チュートリアル図
目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...
CSS calc() の数式に関する詳細な理解
数式 calc() は CSS の関数であり、主に数学演算に使用されます。 calc() を使用する...
MySQL ストアド関数の詳細な紹介
目次1. ストアド関数を作成する2. ストアド関数の呼び出し3. 保存された関数を削除する4. スト...
モバイル開発チュートリアル: ピクセル表示の問題の概要
序文モバイル端末の開発の過程で、モバイル端末のディスプレイはデスクトップ端末のディスプレイとは一般的...
Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)
1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...