【CSS】要素を囲ってるタグの存在を消す方法

CSSである要素を囲ってるタグをスマホもしくはPCだけ存在を消したい。

本記事ではこのような悩みを解決します。

実装サンプル

実装サンプルです。

itemクラスにdisplay: flex;を指定して横並びにしてます。

本来だと、子要素であるblock要素が二つ横並びになるはずですが、

block要素の存在を消して、孫要素のpタグ4つが横並びになるようにしてます。

実装方法は以下の通りです。

//blockクラスの存在を消す
.block {
  display: contents;
}

CSSでタグの存在を消すコード例です。

タグを消したい要素に対してdisplay: contents;を指定します。

以上で実装完了です。

あとはメディアクエリを使って、タグの存在を消したい任意のデバイス幅（PC・スマホ）でdisplay: contents;を指定してみましょう。

CSSで要素を囲ってるタグの存在を消す方法について紹介しました。

以上で解説を終わります。