CSS でページ要素を非表示にする 5 つの方法

CSS を使用してページ要素を非表示にする方法はたくさんあります。不透明度を 0、可視性を非表示、表示をなし、または位置を絶対に設定し、位置を非表示領域に設定できます。

要素を非表示にするテクニックはたくさんあるのに、それらはすべて同じ効果をもたらすように見えるのはなぜか、不思議に思ったことはありませんか?実際には、各方法には他の方法と微妙な違いがあり、これらの違いによって特定の状況でどの方法が使用されるかが決まります。このチュートリアルでは、状況に応じて要素を非表示にする上記の方法を選択できるように、留意する必要がある小さな違いについて説明します。

Opacity

不透明度属性は、要素の透明度を設定することを意味します。要素の境界ボックスを変更するようには設計されていません。これは、不透明度を 0 に設定すると、要素が視覚的に非表示になるだけであることを意味します。要素自体は引き続き独自の位置を占め、Web ページのレイアウトに貢献します。ユーザーのインタラクションにも応答します。

.hide {
opacity: 0;
}

画面読み上げソフトウェアで要素を非表示にするために opacity 属性を使用する予定がある場合、残念ながらそれはできません。要素とそのすべてのコンテンツは、Web ページ上の他の要素と同様に、スクリーン リーダーによって読み取られます。言い換えれば、要素は不透明であるかのように動作します。

また、不透明度属性を使用して素晴らしいアニメーションを実現できることも思い出していただきたいと思います。 opacity 属性値が 1 未満の要素も、新しいスタッキング コンテキストを作成します。

マウスが非表示の 2 番目のブロック上に移動すると、要素の状態が完全に透明から完全に不透明にスムーズに遷移します。また、ブロックのカーソル プロパティはポインターに設定されており、ユーザーがブロックを操作できることを示します。

可視性

2 番目に説明する属性は可視性です。値を hidden に設定すると、要素が非表示になります。 opacity 属性と同様に、非表示要素も Web ページのレイアウトに影響を与えます。不透明度との唯一の違いは、ユーザーの操作に応答しないことです。さらに、要素は画面読み上げソフトウェアで非表示になります。

この属性は、初期状態と終了状態が異なる限り、アニメーション効果を実現することもできます。これにより、表示状態の切り替え間の遷移アニメーションが時間的にスムーズになります (実際、これを使用して、要素の遅延表示と非表示を実装するための hidden の使用が可能です - 翻訳者注)。

.hide {
Visibility: hidden;
}

要素の可視性が非表示に設定されており、その子孫要素の 1 つを表示したい場合は、その要素の可視性を明示的に可視に設定するだけでよいことに注意してください。 (例の .o-hide p と同様 - 翻訳者の注記)。 p タグ内の番号ではなく、非表示の要素のみにカーソルを置いてみてください。マウス カーソルが指にならないことがわかります。現時点では、マウスをクリックしてもクリック イベントはトリガーされません。

タグ内の

タグは、すべてのマウス イベントをキャプチャできます。マウスをテキストの上に移動すると、

自体が表示され、イベントの登録が有効になります。

Display

display 属性は、単語の意味に従って要素を実際に非表示にします。表示プロパティを none に設定すると、要素は表示されなくなり、ボックス モデルも生成されなくなります。この属性を使用すると、非表示の要素はスペースを占有しません。それだけでなく、表示を none に設定すると、要素に対するユーザーの直接の操作は無効になります。また、画面読み上げソフトウェアは要素の内容を読み取りません。このようにすると、要素がまったく存在していないかのような効果が得られます。

この要素の子孫要素も同時に非表示になります。このプロパティに遷移アニメーションを追加しても効果はありません。異なる状態値間の切り替えは常に即座に有効になります。

ただし、この要素には引き続き DOM 経由でアクセスできることに注意してください。したがって、他の要素と同様に DOM を通じて操作できます。

.hide {
display: none;
}

2 番目の block 要素内に

要素があり、それ自身の表示属性が block に設定されていることがわかりますが、まだ表示されていません。これは、visibility:hidden と display:none のもう 1 つの違いです。前の例では、子孫要素の可視性を明示的に可視に設定すると、その要素が表示されるようになりますが、自身の表示値が何であっても、祖先要素の表示が none である限り、それらはすべて表示されます。目に見えない。

次に、最初のブロック要素の上にマウスを数回移動してクリックします。この操作により、番号が 0 より大きい 2 番目のブロック要素が明らかになります。これは、要素がユーザーに対して非表示に設定されている場合でも、JavaScript を介して操作できるためです。

ポジション

操作したい要素があるが、それが Web ページのレイアウトに影響を与えたくない場合、この状況を処理する適切なプロパティがありません (不透明度と可視性はレイアウトに影響しますが、表示は影響しません)。レイアウトは存在しますが、直接操作することはできません - — 翻訳者注)。この場合、要素を表示領域の外に移動することのみを検討できます。この方法はレイアウトに影響を与えず、要素を操作可能な状態に保ちます。このメソッドを使用する CSS は次のとおりです:

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

このメソッドの主な原則は、topとleftを結合することです。画面上で見えなくなるのに十分な大きさの負の数に設定されます。この手法を使用する利点 (または潜在的な欠点) の 1 つは、非表示にした要素の内容が画面読み取りソフトウェアで読み取れることです。ユーザーが見えないように要素を表示領域の外側に移動しているだけなので、これは完全に理解できます。

このメソッドを使用してフォーカス可能な要素を非表示にすることは避けてください。これは、ユーザーがその要素にフォーカスを与えたときに、予測できないフォーカスの切り替えが発生するためです。この方法は、カスタム チェックボックスやラジオ ボタンを作成するときによく使用されます。 (チェックボックスとラジオ ボタンをシミュレートするには DOM を使用しますが、フォーカス スイッチを「受け取る」ために実際のチェックボックスとラジオ要素を非表示にするにはこの方法を使用します - 翻訳者注)

クリップパス

要素を非表示にする別の方法これを行うには、それらをクリップします。以前は、これはクリップ プロパティを介して実現できましたが、このプロパティは非推奨となり、クリップパスと呼ばれるより優れたプロパティが優先されました。この属性のより高度な使用方法については、Nitish Kumar の最近の SitePoint 記事「clicp-path 属性の紹介」を参照してください。

クリップパス プロパティは IE または Edge ではまだ完全にはサポートされていないことに注意してください。クリップパスで外部 SVG ファイルを使用したい場合、ブラウザのサポートはさらに低くなります。 Clip-path 属性を使用して要素を非表示にするコードは次のようになります:

.hide {
Clip-path: Polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

最初の要素上でマウスをホバーすると、2 番目の要素がクリップパスによって非表示になっている場合でも、2 番目の要素に影響を与える可能性があります。それをクリックすると、非表示のクラスが削除され、その位置から要素が表示されるようになります。非表示の要素内のテキストは、スクリーン リーダー ソフトウェアで読み取ることができます。多くの WordPress サイトは、クリップ パスまたは以前のクリップを使用して、スクリーン リーダー ソフトウェア用に特別に提供されたテキストを実装します。

要素自体は表示されなくなりましたが、要素が占有する必要がある四角形のサイズを依然として占めており、その周囲の要素は、要素が表示されているかのように動作します。マウスオーバーやクリックなどのユーザー操作は、クリッピング領域の外では有効にならないことに注意してください。この場合、クリッピング領域のサイズはゼロです。これは、ユーザーが非表示の要素を直接操作できないことを意味します。さらに、このプロパティを使用すると、さまざまなトランジション アニメーションを使用してさまざまな効果を実現できます。

結論

このチュートリアルでは、CSS で要素を非表示にする 5 つの異なる方法を見ていきました。各方法は他の方法とは少し異なります。何を達成したいのかを知ることは、どの属性を使用するかを決定するのに役立ち、時間が経つにつれて、実際のニーズに基づいて最適なアプローチを直感的に選択できるようになります。

以上がCSS でページ要素を非表示にする 5 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。