隠す方法

表示の場合：なし、可視性の場合：非表示？

何をしようとしているかによって異なります。 ブロックや特別な属性を隠す他のオプションがあります。

何かを非表示にする必要がある場合は、それを完全に削除することをお勧めします。サイトがより簡単になり、コードがよりきれいになり、エラーが少なくなります。 しかし、当面そこに隠れて、誰かのために役立つようにする必要がある場合-これは別の問題です。 方法の選択を間違えないことが重要です。

最もシンプルで最も人気のあるものはディスプレイです：なし、likeのように機能します：要素がHTMLから切り取られているようです。 ページには表示されず、隣接するブロックはそれについて何も知りません。 すべてではありません。 スクリーンリーダーでも再生し、内容を読みません。これには注意してください。

/*  */ .cut-down { display: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

興味深いことに、要素が完全にカットされているにもかかわらず、ブラウザはimgからdisplay：noneの画像をロードします。 画像が背景で示されている場合は、ChromeとEdgeもダウンロードしますが、FirefoxとSafariはダウンロードしません。 まあ、彼らはダウンロードの最適化、何をすべきかについて異なる見解を持っています。

もう1つの方法は可視性です。隠された、全能の輪のように機能します。要素はここにあるように見え、隣接するブロックはそれを感じますが、見えません。 そして、これは不透明度とどう違うのですか？0？ 不透明度は単純に要素を透明（または半透明）にし、visibility：hiddenはまだ相互作用を許可しません：ポイント、クリック、フォーカス。

 /*  */ .one-ring { visibility: hidden; } /*   */ .one-ring:hover { visibility: visible; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

可視性：hiddenにはもう1つの優れた機能があります。プロパティが継承されます。つまり、非表示の親の子が表示を可視に変更できます。 このようなトリックは、ディスプレイ：なしでも不透明度：0でも機能しません。ポップアップメニューやヒントを使用すると便利です。

コンテンツの一部を残したまま、要素がデザインに干渉せず、スクリーンリーダーから隠れないことが必要な場合があります。 まあ、デザイナーはここで見出しを描きませんでしたが、ドキュメントのロジックによると、彼はここで必要です。 それは、ディスプレイ：隠しまたは可視性：なしのようなものです！ 私はこれを思いついたばかりで、自然には存在しません。

最近、ドラフトの第3レベルのCSSディスプレイドラフトに、show、discard、hideの値を持つボックス抑制プロパティが登場しました。 ディスプレイからブロックの可視性を解放します-どれも反対側にはブロックだけでなく、インライン、フレックス、グリッドもあります。 破棄値は要素を習慣的にノックアウトし、hideは同じ魔法のコンボを行います。 詳細については、レイチェルアンドリューをご覧ください。

 /* ,   */ .combo { box-suppress: hide; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

残念ながら、ボックスを抑制するまでに長い時間待たなければなりません。 それはまだブラウザにあるだけでなく、すでにそのドラフトにある-それは最近、次のレベルに移動して、現在のレベルを時間通りに完了する。 だからあなたは自分で魔法をしなければならない-あなたの手を見てください。

デザインから要素を非表示にするが、その内容はアクセス可能なままにする「視覚的に非表示」または「視覚的に非表示」などのパターンがあります。 スクリーンリーダーに関するその他のニュアンスについては、Tim Wrightをお読みください。 仕組み：ユニバーサルユーティリティクラスを作成し、アクセス不可にする必要がある要素に追加します。 通常、彼らはそれを次のように呼びます。視覚的に隠され、ハイフンで。

 <h2 class=" visually-hidden">   ,   </h2>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

中身を見ると、これは通常の位置です：絶対プラスクリップ、要素をゼロにトリミングします。 つまり、隣人には影響せず、見えなくなります。 他のすべてのプロパティは、汎用性とブラウザ間の互換性を追加するため、見ずにクラスを任意の要素にスプラッシュできます。 ally.js Rodney Reimのヘルプをご覧ください。

 .visually-hidden { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

隠し属性を任意の要素に追加すると、それが消えることをご存知ですか？ わかった！ 最新のブラウザでは、同じ表示：要素を切り詰めるものはどれもこの属性にハングアップしません。 必要に応じて、またはチェックされたバイナリであるため、JavaScriptを介して公開すると便利です。 IE 10、Safari 5、およびその他の古いブラウザーのスタイルに[非表示] {display：none}を追加することを忘れないでください。

 <div hidden>  </div> // JS div.hidden = true;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSでの非表示とシークについて知っておく必要があることはほとんどそれだけです。 これらの方法を試してください、それらはすべて異なる状況で良いです。 重要なのは、肩を切り落として、利用可能なコンテンツについて考えないことです。

ビデオ版

ここで質問することができます。