HTML要素を非表示にしたいと思う時がありますよね。
ありがたいことに、CSSでは様々な方法があります。
それでは、まずはghostクラスでHTML要素を非表示にしてみましょう。
非表示設定
HTML要素およびCSSプロパティどちらもデフォルトでは表示になっていますが、「visibility」プロパティを「hidden」に設定することで非表示にできます。
これでghostクラスは非表示になりましたが、ページ上はスペースができてしまいます。
スペースを取らずに非表示にする
もし何かをスペースを取らずに非表示にしたい場合、CSSの「display」プロパティを利用することができます。
開発者は「display」プロパティをHTML要素をブロックもしくは埋め込みとして表示する場合に利用するケースが多いと思いますが、このプロパティは要素を完全に非表示にすることができます。
「visibility: hidden」と違って、「display: none」で非表示にされた要素はページ上でスペースを取りません。
シースルー表示にする
CSSの「opacity」プロパティを使えば、HTML要素を透過的にすることができます。
「visibility: hidden」と同様に、「opacity: 0.0」と設定してもHTML要素の部分にはスペースが残ります。これらテクニックを使えば通常のブラウザーを使っているユーザーにはHTML要素は見えませんが、要素自体はDOMの一部のまま残ることは忘れないでください。
見えない場所に配置する
HTML要素を見えなくする最後の方法は、CSSの「position」プロパティを使って要素をページの見えないような場所に配置することです。以下のように、任意の大きなピクセルを設定します。
こうする理由は、誰もその要素の存在に気づかない場合でもスクリーンリーダーが認識できるからです。ただし、スクリーンリーダーが混乱しないように、上部や下部ではなく、非表示要素は左側に配置しましょう。
この記事は「How to make HTML disappear completely」を翻訳・参考にしています。
おすすめ新着記事
おすすめタグ