CSSで設定されているコードを打ち消す方法

CSSは、Webページのスタイルを定義するための言語です。CSSで設定されたコードを打ち消す方法は、以下の2つがあります。

  • 「initial」プロパティを使用する
  • 「none」プロパティを使用する

「initial」プロパティを使用する

「initial」プロパティは、要素の初期値をリセットするプロパティです。CSSで設定されたコードを打ち消す場合は、対象となるプロパティに「initial」を指定します。

例えば、以下のコードで、要素の幅を100pxに設定しています。

CSS
.example {
  width: 100px;
}
CSS

このコードを「initial」プロパティを使用して打ち消す場合は、以下のようになります。

CSS
.example {
  width: initial;
}
CSS

この場合、要素の幅はブラウザのデフォルト値になります。

サンプルコード

CSS
/* 元のコード */
.example {
  width: 100px;
  height: 100px;
  color: red;
}

/* 「initial」プロパティを使用して打ち消す */
.example {
  width: initial;
  height: initial;
  color: initial;
}
CSS

「none」プロパティを使用する

「none」プロパティは、プロパティの値を指定しないことを意味します。CSSで設定されたコードを打ち消す場合は、対象となるプロパティに「none」を指定します。

例えば、以下のコードで、要素の背景色を赤に設定しています。

CSS
.example {
  background-color: red;
}
CSS

このコードを「none」プロパティを使用して打ち消す場合は、以下のようになります。

CSS
.example {
  background-color: none;
}
CSS

この場合、要素の背景色は透明になります。

サンプルコード

CSS
/* 元のコード */
.example {
  background-color: red;
  border: 1px solid black;
}

/* 「none」プロパティを使用して打ち消す */
.example {
  background-color: none;
  border: none;
}
CSS

要素の背景色は透明になり、要素の周囲の枠線は表示されなくなります。

まとめ

CSSで設定されているコードを打ち消すには、「initial」プロパティまたは「none」プロパティを使用します。どちらのプロパティを使用するかは、打ち消したいスタイルの種類によって異なります。

「initial」プロパティは、要素の初期値をリセットするため、幅や高さなどの基本的なスタイルを打ち消す場合に便利です。

「none」プロパティは、プロパティの値を指定しないことを意味するため、背景色や枠線などのスタイルを打ち消す場合に便利です。

 


作業の手順がわからない、WEB関連の課題をひとまとめに解決したいという方へ

動画制作・ホームページ制作・広告運用代行など、WEBの課題を一本化しませんか?

弊社サービス「IPPONka(一本化)」を是非ご利用ください。

一本化(IPPONka)の詳細はこちら

一本化(IPPONka)すると、話が早い。WEBの課題を一本化。