CSSコンポジティングとブレンド：画像を重ねて表現を豊かに

CSS コンポジティングとブレンド：画像や要素を重ねて表現を豊かに

コンポジティング：レイヤーの重ね合わせ

コンポジティングは、複数のレイヤーを重ねることで、奥行きや陰影などの効果を生み出す技術です。Photoshopなどの画像編集ソフトでいう「レイヤー」と似ていますが、CSSでは要素をレイヤーとして扱い、それぞれに位置や透明度などの設定を施せます。

代表的なコンポジティングプロパティ:

• z-index: レイヤーの重なり順を指定
• position: レイヤーの位置を指定
• opacity: レイヤーの透明度を指定

ブレンド：レイヤーの合成方法

ブレンドは、重ね合わせたレイヤーをどのように合成するかを指定する技術です。単純な重ね合わせだけでなく、乗算や加算、差分など、様々な合成方法を選択できます。

代表的なブレンドモード:

• normal: 通常の重ね合わせ
• multiply: 乗算：下のレイヤーの色を暗い方に引き寄せる
• screen: 加算：下のレイヤーの色を明るい方に引き寄せる
• difference: 差分：下のレイヤーと上のレイヤーの色の差を強調

具体的な応用例

• 画像を重ねて奥行きを出す
• 影や光を表現して立体感を出す
• ぼかしやぼかし効果で柔らかい雰囲気を出す
• 複数の画像を組み合わせてエフェクトを作成
• 透過画像を重ねて透け感を表現

実装例：画像を重ねて影を作る

<div class="container">
  <img class="image" src="image.jpg" />
  <div class="shadow"></div>
</div>

.container {
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
}

.shadow {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

まとめ

CSS コンポジティングとブレンドは、Webページのデザイン表現を大きく広げる技術です。画像や要素を重ね合わせ、様々な視覚効果を生み出すことで、より魅力的で印象的なページを作成できます。

CSS コンポジティングとブレンド：サンプルコード集

画像を重ねて奥行きを出す

<div class="container">
  <img class="background" src="background.jpg" />
  <img class="foreground" src="foreground.jpg" />
</div>

.container {
  position: relative;
  width: 400px;
  height: 300px;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.foreground {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 2;
}

• background要素を背景画像として配置
• foreground要素を前景画像として配置
• z-indexプロパティでforeground要素をbackground要素より前面に配置

影や光を表現して立体感を出す

<div class="container">
  <div class="box"></div>
</div>

.container {
  width: 200px;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

解説:

• box-shadowプロパティで影を表現
• box-shadowプロパティのinset値で内側の影を表現

ぼかしやぼかし効果で柔らかい雰囲気を出す

<div class="container">
  <img src="image.jpg" />
</div>

.container {
  width: 400px;
  height: 300px;
}

img {
  filter: blur(5px);
}

解説:

• filterプロパティでぼかし効果を表現
• blur()関数でぼかしの強さを指定

複数の画像を組み合わせてエフェクトを作成

<div class="container">
  <img class="image1" src="image1.jpg" />
  <img class="image2" src="image2.jpg" />
</div>

.container {
  position: relative;
  width: 400px;
  height: 300px;
}

.image1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.image2 {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 2;
  mix-blend-mode: multiply;
}

解説:

• mix-blend-modeプロパティで乗算ブレンドモードを適用
• 2つの画像を重ねて、暗い部分を強調

透過画像を重ねて透け感を表現

<div class="container">
  <img src="background.jpg" />
  <img class="overlay" src="overlay.png" />
</div>

.container {
  width: 400px;
  height: 300px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}

解説:

• opacityプロパティで透過度を指定
• 背景画像を透けて見えるように

上記のサンプルコードはほんの一例です。CSS コンポジティングとブレンド

CSS コンポジティングとブレンド：その他の方法

filter プロパティは、ぼかしやドロップシャドウなどの視覚効果を要素に適用するために使用できます。

img {
  filter: blur(5px) drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

clip-path プロパティは、要素の形状を定義するために使用できます。これを使用して、画像やその他の要素の一部のみを表示することができます。

img {
  clip-path: circle(50% at 50%);
}

mask プロパティは、要素のマスクとして別の要素を使用するために使用できます。これを使用して、画像やその他の要素を透過させることができます。

<div class="container">
  <img src="image.jpg" />
  <div class="mask"></div>
</div>

.container {
  width: 400px;
  height: 300px;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: black;
  opacity: 0.5;
}

@media ルールを使用して、デバイスや画面サイズに応じて異なるブレンドモードを適用することができます。

@media (max-width: 768px) {
  img {
    mix-blend-mode: multiply;
  }
}

JavaScriptを使用して、ブレンドモードを動的に変更することもできます。

const image = document.querySelector('img');

image.addEventListener('click', () => {
  image.style.mixBlendMode = 'multiply';
});

CSS コンポジティングとブレンドは、Webページのデザイン表現を大きく広げる技術です。様々な方法を組み合わせることで、より複雑な視覚効果を生み出すこともできます。

これらの技術を理解し、使いこなすことで、より魅力的で印象的なページを作成しましょう。