CSSを反転させる方法


  1. 背景色の反転: 要素の背景色を反転させるには、以下のようなCSSを使用します。
.my-element {
  background-color: black;
  color: white;
}
.my-element.inverted {
  background-color: white;
  color: black;
}

上記の例では、.my-elementクラスを持つ要素の背景色とテキスト色を黒に設定し、.invertedクラスを追加することで背景色とテキスト色を白に反転させます。

  1. テキストの反転: 要素内のテキストを反転させるには、以下のようなCSSを使用します。
.my-element {
  color: black;
}
.my-element.inverted {
  color: white;
}

上記の例では、.my-elementクラスを持つ要素のテキスト色を黒に設定し、.invertedクラスを追加することでテキスト色を白に反転させます。

これらは一般的な方法であり、他にもさまざまな要素の反転方法があります。要件に合わせて適切な方法を選択してください。