Written by Kasumi

【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で要素を囲ってるタグの存在を消す方法について紹介しました。

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

目次

関連記事

HTMLCSS プログラミング

CSSで背景画像を右からを基準にpx指定する方法

2020.07.13
5478
HTMLCSS

CSSで透過グラデーションを作成する方法

2023.01.20
5005
HTMLCSS

CSSのhas擬似クラスを使って指定した要素の有無を判別する方法

2023.04.21
928
HTMLCSS jQuery

【CSS】高さ100vh指定時のスマホステータスバーを除く方法

更新日:2022.09.09
2516