【CSS】要素を非表示にする3つの方法を徹底比較

こんにちは！AndHAエンジニアチームです。

今回は、コーディングをしていると「必ず」と言っていいほど使う、「CSSで要素を非表示にする方法」について徹底比較していきます。

では早速スタート！

方法① display: none

コーディング経験ある方なら幾度となく記述してきたであろう、display: none。

今回取り上げる3つの非表示方法の中で、最もポピュラーといえるのではないでしょうか。

公式ドキュメントによる解説は下記になります。

要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに visibilityプロパティを使用してください。

要素の display の値に none を使用すると、その要素はアクセシビリティツリーから削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。

要素を視覚的に隠したい場合は、よりアクセシブルな代替手段として、画面から視覚的に要素を削除しますが、画面リーダーのような支援技術が解析可能な状態を維持するための、プロパティの組み合わせを使用できます。

https://developer.mozilla.org/ja/docs/Web/CSS/display

つまり、ポイントとしては

• 要素を完全にないものとし、表示領域もなくなる。
• アクセシビリティツリーからも削除されるため、読み上げ機能等には認識されなくなる。
• 子孫要素にも値が継承され、上書きができない。

といったところでしょうか。

方法② visibility: hidden

続いてはvisibility: hidden。

こちらも非表示系の記述としてはポピュラーかと思いますが、display: noneとの違いはどこでしょうか。

要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は visibilityが visibleに設定されていれば可視になります。(タブ順で操作された時などに) 要素はフォーカスを受け取ることができません。

要素の visibilityの値に hiddenを使用すると、 アクセシビリティツリーから削除されます。これは要素及びその子孫要素が読み上げ技術でアナウンスされない結果になります。

https://developer.mozilla.org/ja/docs/Web/CSS/visibility

つまり、ポイントとしては

• 要素を非表示にするが、表示領域は残る。
• アクセシビリティツリーからも削除されるため、読み上げ機能等には認識されなくなる。
• 子孫要素にも値が継承されるが、visibleで上書き可能。

ということで、表示領域が残るか否か、また子孫要素への影響の違いがあるようです。

方法③ opacity: 0

最後はopacity: 0で透明度を0にする方法。

プロパティの意味も直感的にわかりやすく、ただ透明になるだけなのが予想できますが、どんな違いがあるのでしょうか。

要素は完全に透明です (つまり、不可視です)。

opacityの値は子要素に継承されませんが、要素のコンテンツを含む全体に適用されます。すなわち、ある要素とその子の不透明度が互いに異なっていたとしても、その要素の背景に対してはすべて同じ不透明度になります。

https://developer.mozilla.org/ja/docs/Web/CSS/opacity

ポイントとしては、

• 要素が透明になるだけで、表示領域も残る。
• アクセシビリティツリーからは削除されない。
• 子孫要素にも値が継承され、上書きができるが、親要素の透明度に影響を受ける。

前述の2つとは毛色が少し違いますね。見た目が透明になるだけで、アクセシビリティツリーへの影響も出ません。

子孫要素ですが、0は0のままどうしようもありませんでした。が、値は継承されているため、親要素にopacity: 0.5、子要素にも0.5を指定すると、子要素の透明度は0.25になるようです。

追加検証

では、ここまで3つの方法を見てきましたが、ここからは実用的な部分で深掘り検証していきます。

視覚的にわかるよう検証用コードを用意しましたので、併せてご覧ください。

See the Pen visibility_test by and_ima (@and-im) on CodePen.

通常の表示状態子要素

display: none のtransitionテスト


が子要素で上書き可能

visibility: hidden のtransitionテスト

opacity: 0が子要素に継承

opacity: 0が子要素で上書きできない

opacity: 0 のtransitionテスト