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

【CSS3】アニメショーンプロパティを使いこなそう!

更新日:2019.11.28
349
HTMLCSS

HTMLで前のページ・次のページへ戻るリンクボタンを実装する方法

2022.06.30
718
HTMLCSS プログラミング

【簡単】HTMLのformでリセットボタンを入れる方法

2022.04.17
406
HTMLCSS プログラミング

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

2022.02.20
4807