画像と背景色を重ねてサイトにワンポイント加える

はじめに

今回は、Webサイトでよく見かける画像と背景色を重ねたデザインについて考えていきます。

全体のコード一覧

See the Pen 画像と背景色を重ねる by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

@charset "UTF-8";

.parent {
  position: relative;
  width: 500px;
  height: 500px;
}

• .parent 要素に position: relative; を指定し、子要素の位置指定を基準とする親要素を設定しています。

.children1 img {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  z-index: 1; /* 上層に配置 */
}

.children2 {
  position: absolute;
  top: 200px;
  left: 350px;
  width: 300px;
  height: 300px;
  background: #1e88e5;
  z-index: 2; /* 下層に配置 */
}

• .children1 img要素と.children2要素にposition: absolute;を指定し、.parentを基準にtop: 100px;、left: 100px; の位置に配置しています。

• z-index: 1; によって、この要素はz-indexが0以下の要素よりも上に配置されますが、.children2がz-index: 2として設定されているため、.children2よりも下に表示されます。

z-indexの使い方

z-indexは、要素の重なり順を指定するために使用します。 値が大きいほど前面に表示され、小さいほど背面に配置されます。

.element {
  position: relative; /* z-indexを効かせるためにpositionを指定 */
  z-index: 10; /* この要素の重なり順を10に設定 */
}

z-indexを使うための条件

• z-indexは通常、positionプロパティがrelative、absolute、fixed、またはstickyである要素にのみ適用されます。

• z-indexの値は整数で、正の値、負の値、または0を指定できます。
  例: z-index: 5; は、z-index: 2; よりも前面に表示されます。

重なりのルール

• 親要素と子要素のz-indexを比較するときは、同じ階層内でのみ比較されます。
  親要素のz-indexが高くても、その子要素のz-indexの方が大きければ、子要素が前面に表示されるわけではありません。

まとめ

今回は、画像と背景色の重なりについてまとめました。改めて復習し直すと、positionプロパティとの組み合わせ次第で、デザインの幅がグッと広がる気がしました。