画像に画像を重ねて表示

ヒーロー画像の上に、別の画像を重ねて表示する

CSS のポジション機能を使う

CSS のポジション機能で画像を重ねる

画像の上に画像を重ねる

上に重ねる画像は、ヒーローコンテナ（領域）の上下左右中央に配置する

画像に別の画像やテキストなどの要素を重ねる方法は大きく分けて 3つある

• 1つを背景画像にして、もう1つを要素（<img>）で表示する
• 1つの要素に複数の背景画像を適用する
• CSS のポジション機能を使って要素と要素を重ねる

<img> タグで挿入しているヒーロー画像の上にロゴ画像を表示させるので、CSS のポジション機能を使う

HTML: ポジション機能をつかうときは1つひとつの画像を <div> などで囲む

<div> <img src="..."> <div>

そのうえで、重ねたい画像同士を共通の親要素に含める

ソースコードの下に出てくる画像ほど上に重なる

HTML: 画像を重ねるときの基本的な HTML の構造

<div> ―――― 全ての重なる要素（画像）を含む親要素
<div> <img src="..."> </div> ―――― 下に重なる
<div> <img src="..."> </div> ―――― 上に重なる
</div>

ポジション機能を使う場合は、親要素に position: relative; を適用する

親要素に含まれる要素のうち、一番下になる要素以外に position: absolute; を適用する

上に重なる方の画像は、親要素の上下左右中央に配置する

ポジションで配置する要素の位置を調整するには、その要素のサイズを確認する

PC 向けレイアウトとモバイル向けレイアウトで異なるので、それぞれのサイズに合わせて CSS に設定する値を決める

実践的なポジションの使い方と要素の配置

HTML では通常、要素の上に要素が重なることは無い

要素の上に要素を重ねたい場合は、ポジション機能を使用する

ポジション機能を使う際のポイント

• 親要素に position: relative; を設定する
• 重ねたい要素に position: absolute; を設定する
• 一番下に重なる要素には position プロパティを設定しない

これらのプロパティには position: relative; が設定された親要素のボックスの左上、または右下からの距離を指定する

top プロパティ、left プロパティを使った場合は左上からの距離

bottom プロパティ、right プロパティを使った場合は右下からの距離

値の単位には一般的に px もしくは % を使う

配置される要素の基準点に注意

top: 50%、left: 50% に設定しても中央に要素は配置されない

trans form プロパティで位置を調整する

このプロパティは、要素を移動（translate）、回転（rotate）、拡大縮小（scale）する機能

CSS: 要素を上下左右中央に配置する

position: absolute;
top: 50%;
left: 50%;
transform: translate(-表示する要素の幅の/2, -表示する要素の高さの/2)

テンプレートファイル