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 における this ポイントの問題の詳細な説明
要約する地球環境 ➡️ ウィンドウ通常関数 ➡️ ウィンドウまたは未定義コンストラクター ➡️ 構築...
Ubuntu 18.04 では、すべてのサードパーティ製 Python パッケージのワンクリック アップグレードと Python パッケージのインストールが可能になりました。
1. pipとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンイ...
MySQLで指定した時間前にレコードを自動的に削除する方法
イベントについて: MySQL 5.1 では、イベントの概念が導入され始めました。イベントは「時間ト...
加算、減算、乗算、除算の機能を実現するには、HTML に 2 つの数値を入力します。
1. parseFloat() 関数Web ページ上に簡単な計算機を作成し、テキスト ボックスに ...
複数のドメイン名に対する Nginx リバース プロキシを使用した HTTP および HTTPS サービスの実装
現在、Nginx は、Web サービスを提供するために、Windows ベースの IIS と Lin...
jsvc を使用して tomcat を起動する方法 (通常のユーザーとして実行)
jsvc の紹介実稼働環境では、Tomcat はデーモン モードで実行する必要があります。Tomc...
Node.jsサービスDockerコンテナアプリケーション実践のまとめ
この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...
Linuxカーネルとデバイスツリーのコンパイルと書き込みを分析する
目次1. 材料を準備する2. Linuxカーネルファイルをダウンロードする3. コンパイル4. TF...
ファイアウォールの iptables 戦略を使用して Linux サーバー上のポートを転送する方法
2つの異なるサーバー間の転送ポート転送を有効にするまず、デフォルトでは無効になっている IP 転送機...
Ubuntu 20.04 CUDA & cuDNN のインストール方法 (グラフィカル チュートリアル)
CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...
インデックスを使用して数千万のデータを持つ MySQL のクエリ速度を最適化する
1. インデックスの役割一般的に言えば、インデックスは本の目次に相当します。条件に基づいてクエリを実...
JavaScript のシングルトン デザイン パターン
目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則（SOLID） 3....
Dockerイメージのローカル移行の実装
最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...
JavaScript の構造化代入の一般的なシナリオと例 5 つ
目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...
ユーザーエクスペリエンスの概要
最近では、ソフトウェアやウェブサイトのいずれの作業であっても、設計時に「ユーザー エクスペリエンス」...