先日、本件とは全然関係ないことを調べているときに、display:contents;なるものを見つけました。
displayの値では聞いたことがなかったので、調べないといけないことをそっちのけで調べたところ、痒いところに手が届く値だったので、使い方を含めて、備忘録として記録しておきます。
display:contents;とは。メリット。
簡単に説明すると、指定した要素がなかったかのように振るまわれます。
ただ、それだけだとdisplay:none;と同じでは？となってしまいそうですが、違います！
その違いが、かゆいところに手が届く！と言った理由になります。
具体的にどのように違うかというと、子要素の扱い方です。
ご存知の通り、display:none;を指定すると、指定した要素はもちろん非表示になります。
<div class="contents">
<p>テキスト１</p>
<div class="picture"><img src="hoge.jpg"></div>
</div>
.contents {
display:none;
}上記のようなHTMLがあったとして、.contentsにdisplay:none;を指定した場合子要素も連れ立って非表示になります。
ところが、display:contents;と指定すると子要素は表示されたまま、指定した要素だけ非表示になります！
これなら、不要な要素だけピンポイントで削除できるので便利ですよね！
メリット
- 非表示にしたい要素をピンポイントで非表示にできる。
display:contents;の注意点。デメリット。
便利そうなdisplay:contents;ですが、注意点もあります。
要素は非表示になるのですが、要素の中にあるテキストは残ってしまいます。
非表示にしたい要素の中にテキストがある場合は、注意しましょう。要素だけ非表示にされるため、テキストだけ残り、デザインが崩れてしまう原因になります。
<div class="contents">
<span><img src="hoge.jp"></span>
このテキストは、display:contents;では消えません。
</div>
.contents {
display:none;
}また、当然ではありますが、要素が非表示になるので、width、height、padding、margin、background-colorなどのプロパティも全て無効になります。
上記の例でいうと、.contentsに指定しているクラスで、 <span>が継承しているクラスなどは、すべて同じく無効になります。
子要素は、親要素を継承していることが多いので、非表示にしたあと同じプロパティを指定し直さなくてはならなくなります。
display:contents;を使う予定であれば、事前にプロパティの適用の仕方を考えて適用させておきましょう。
デメリット
- 親要素が非表示になるので、プロパティも無効になってしまう。
まとめ
以上、display:contents;の使い方でした。
実際、私はまだ使ったことがないので、使用感自体は分かりません。
これからは、積極的に実務で使っていこうと思います！
また、なにか分かったらこの記事に追記していきます。