【CSS】乗算を完全ガイド！驚きの5つの使い方

CSS

2024.02.17

この記事は約3分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

はじめに

この記事では、初心者にもわかりやすいようにCSS乗算の使い方、対処法を徹底解説します。

さらに、サンプルコードと応用例を用意しました。

これを読めば、あなたもCSS乗算の達人になれるでしょう。

CSS乗算は、画像や背景色の色合いを調整するために使われるテクニックです。

乗算は、重ね合わせる色のRGB値を掛け合わせることで、より暗い色になります。

これにより、画像やテキストのコントラストを調整できます。

では、まずはCSS乗算の基本的な使い方を見ていきましょう。

img {
  mix-blend-mode: multiply;
}

このサンプルコードでは、すべての画像に乗算効果が適用されます。

.background {
  background-color: rgba(255, 0, 0, 0.5);
  mix-blend-mode: multiply;
}

こちらのサンプルコードでは、背景色に赤色の半透明な乗算効果が適用されます。

乗算効果を使っていると、意図しない結果が生じることがあります。

そのような場合には、次のような対処法が役立ちます。

img.multiply {
  mix-blend-mode: multiply;
}

このサンプルコードでは、特定の画像にだけクラス名 “multiply” を付与することで、乗算効果を適用できます。

img.no-multiply {
  mix-blend-mode: normal;
}

このサンプルコードでは、乗算効果を解除したい画像にクラス名 “no-multiply” を付与することで、乗算効果を無効化できます。

それでは、CSS乗算の応用例とサンプルコードを見ていきましょう。

img {
  transition: mix-blend-mode 0.3s;
}

img:hover {
  mix-blend-mode: multiply;
}

このサンプルコードでは、マウスオーバーした際に画像に乗算効果が適用されるホバーエフェクトが実現できます。

<div class="background">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!-- HTML -->

.background {
  background-image: url("your-image.jpg");
  mix-blend-mode: multiply;
}

.text {
  color: white;
  mix-blend-mode: screen;
}
/* CSS */

このサンプルコードでは、背景画像に乗算効果を適用し、テキストにスクリーン効果を適用することで、コントラストが向上し、テキストが読みやすくなります。

この記事では、CSS乗算の基本的な使い方や対処法を初心者向けに徹底解説しました。

また、応用例とサンプルコードを通じて、CSS乗算を活用するさまざまな方法をご紹介しました。

これであなたもCSS乗算を使いこなせるようになり、Webデザインのスキルを向上させることができるでしょう。

今後もこの記事を参考に、より洗練されたデザインを目指してください。