Written by Kasumi

HTMLタグのデフォルトCSSを指定したタグだけ全て無効にする方法【allプロパティを使おう】

HTMLタグのデフォルトCSSを指定したタグだけ全て無効にしたい。

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

実装例を元に解説します。

実装サンプル

See the Pen
デフォルトCSSを削除
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

左がデフォルトCSSが機能してるbuttonタグ。

右がデフォルトCSSを無効にして、オリジナルCSSを充ててるbuttonタグになります。

一つのあるプロパティを付与する事で、デフォルトで付与されるCSSプロパティを全て無効にしてます。

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

allプロパティでデフォルトCSSを無効にする

無効にしたいHTML要素 {
  all: unset;/*デフォルトCSSを無効*/
}

デフォルトCSSをHTMLタグ事に無効にしたい場合は、allプロパティを使用します。

値にunsetを適用する事で、デフォルトCSSを無効。

プロパティを初期化してくれます。

以上で解決です。

まとめ

allプロパティを使って、HTMLタグのデフォルトCSSを指定したタグだけ全て無効にする方法について紹介しました。

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

目次

関連記事

HTMLCSS

【HTML】OGPタグを設定してfacebookやtwitterに記事を発信しよう

更新日:2019.11.28
511
HTMLCSS

input:text要素をクリックした時の枠線をCSSで変更する方法

2022.05.04
1717
HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
754
HTMLCSS プログラミング

【簡単】checkbox(チェックボックス)のデザインをカスタマイズする方法【CSS】

2022.02.20
12089