【CSS】要素を囲ってるタグの存在を消す方法
CSSである要素を囲ってるタグをスマホもしくはPCだけ存在を消したい。
本記事ではこのような悩みを解決します。
実装サンプル
See the Pen
CSSでタグの存在を消す方法 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
itemクラスにdisplay: flex;を指定して横並びにしてます。
本来だと、子要素であるblock要素が二つ横並びになるはずですが、
block要素の存在を消して、孫要素のpタグ4つが横並びになるようにしてます。
実装方法は以下の通りです。
タグの存在を消す方法
//blockクラスの存在を消す
.block {
display: contents;
}
CSSでタグの存在を消すコード例です。
タグを消したい要素に対してdisplay: contents;を指定します。
以上で実装完了です。
あとはメディアクエリを使って、タグの存在を消したい任意のデバイス幅（PC・スマホ）でdisplay: contents;を指定してみましょう。
まとめ
CSSで要素を囲ってるタグの存在を消す方法について紹介しました。
以上で解説を終わります。
目次
