写真をずらして重ねるCSS｜グリッドの同じマスで重ねる、散らす・文字の箱・丸い写真、コピペ4種類と使いどころ

写真を2枚ずらして重ねる。何枚かの写真を、机に置いたように少しかたむけて散らす。写真の端に、文字の箱を重ねる。雑誌やおしゃれなお店のサイトでよく見るこうした並べ方は、画像を1枚に合成しなくても、CSSのグリッドだけで作れます。写真はそれぞれ別の画像のままなので、あとから1枚だけ差しかえることもできます。

使いどころは「写真が2〜3枚あって、並べるだけでは単調になる場所」です。トップページの紹介や、特集の入口のように、ページの中で1〜2か所だけに使います。写真を比べてほしい一覧や、説明の図には使いません。

この記事の要点

grid-area: 1 / 1 で写真を同じマスに置き、justify-self・margin・rotate でずらすと、position を使わずに写真を重ねたり散らしたりできる
使いどころは、写真2〜3枚でページの入口や紹介をつくるとき。比べてほしい一覧や説明の図では、重ねずに並べる
重なりで写真や文字が隠れないか、狭い画面でも確かめる。見た目のための写真は alt=”” に、文字は画像にせずHTMLで書く

連載「WEBの技術」の40回目です。
今回は、写真をずらして重ねる並べ方。使う指定は、ほとんどがグリッドの基本です。

この記事の内容は、無料の道具でも試せます

アスペクト比計算ツール

画像を入れるだけで、縦横の比率と aspect-ratio が出る（登録なし）

道具で試してみる →

完成見本：写真の重ね方4種類

どれも、写真やカードを「グリッドの同じマス（または、少し重なる列）」に置いて重ねています。3の文字は画像ではなく、HTMLの文字です。

GRID-AREA: 1 / 11. 2枚をずらして重ねるサービス紹介や「お店の雰囲気」を2枚で見せるとき

GRID-AREA ＋ ROTATE2. 写真を散らして置くイベントの様子やスタッフ紹介を、くだけた雰囲気で見せるとき

GRID-COLUMN ＋ Z-INDEX3. 写真に文字の箱を重ねるトップページの「私たちについて」や、特集の入口

JUSTIFY-SELF ＋ ALIGN-SELF4. 大きな写真に丸い写真を重ねる施工事例の「全体」と「細かいところ」、商品の全体と使っている様子

※ 見本の画像はイラストです。見本は読み上げソフトでは読まれないようにしています（コピペ用のコードは、そのまま読み上げられる形です）。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-ov は、サイトのほかのデザインと名前がぶつからないようにするための目印です。HTMLの「画像のURL」と「画像の内容」は、使う写真に合わせて書きかえてください。

1. 2枚をずらして重ねる

grid-area: 1 / 1（グリッドの「1行目・1列目」のマスに置く指定）を2枚の画像の両方に付けて、同じマスに重ねます。2枚目は justify-self: end（マスの中で右に寄せる指定）で右へ、margin-top: 22% で下へずらしています。あとに書いた画像が上に重なるので、2枚目には白い縁と影を付けて、手前にあることが分かるようにしています。

HTML

<div class="kd-ov-pair">
  <img src="画像1のURL" alt="画像1の内容" width="1200" height="800">
  <img src="画像2のURL" alt="画像2の内容" width="1200" height="800">
</div>

CSS

.kd-ov-pair {
  display: grid;
  max-width: 420px;
}
.kd-ov-pair img {
  /* 2枚とも、同じ1つのマスに置く */
  grid-area: 1 / 1;
  align-self: start;
  display: block;
  box-sizing: border-box;
  width: 64%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}
.kd-ov-pair img:nth-child(2) {
  /* 2枚目は右に寄せて、上に「横幅の22%」の余白をあける */
  justify-self: end;
  margin-top: 22%;
  border: 5px solid #FFFFFF;
  box-shadow: 0 10px 24px rgba(16, 40, 58, .18);
}

2. 写真を散らして置く

白い台紙（.kd-ov-photo）に入れた写真3枚を同じマスに置き、justify-self で左・真ん中・右に寄せます。rotate（要素をかたむける指定）で1枚ずつ違う角度にかたむけ、margin-top で高さもずらすと、机の上に写真を置いたような形になります。

HTML

<div class="kd-ov-scatter">
  <div class="kd-ov-photo"><img src="画像1のURL" alt="画像1の内容" width="1200" height="800"></div>
  <div class="kd-ov-photo"><img src="画像2のURL" alt="画像2の内容" width="1200" height="800"></div>
  <div class="kd-ov-photo"><img src="画像3のURL" alt="画像3の内容" width="1200" height="800"></div>
</div>

CSS

.kd-ov-scatter {
  display: grid;
  max-width: 420px;
  padding: 12px 0;
}
.kd-ov-photo {
  /* 3枚とも同じマスに置き、左・真ん中・右に寄せる */
  grid-area: 1 / 1;
  align-self: start;
  width: 46%;
  padding: 7px 7px 24px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(16, 40, 58, .18);
}
.kd-ov-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.kd-ov-photo:nth-child(1) { justify-self: start;  margin-top: 10%; rotate: -6deg; }
.kd-ov-photo:nth-child(2) { justify-self: center; margin-top: 0;   rotate: 3deg; }
.kd-ov-photo:nth-child(3) { justify-self: end;    margin-top: 16%; rotate: 8deg; }

3. 写真に文字の箱を重ねる

横を12本の列に分け（grid-template-columns: repeat(12, 1fr)）、写真に1〜8列目、文字の箱に7〜12列目を使います。7〜8列目が重なるので、そこに文字の箱が乗ります。z-index: 1（重なったときに上に来る順番の指定）で、文字の箱を写真より上にしています。画面が600px以下のときは、写真を全幅にして、文字の箱を写真の下に少し重ねます。

HTML

<div class="kd-ov-story">
  <img src="画像1のURL" alt="画像1の内容" width="1200" height="800">
  <div class="kd-ov-text">
    <p class="kd-ov-en">ABOUT US</p>
    <p class="kd-ov-ttl">海の近くの小さな工房</p>
    <p class="kd-ov-txt">窓から海が見える工房で、ひとつずつ手で仕上げています。</p>
  </div>
</div>

CSS

.kd-ov-story {
  display: grid;
  /* 横を12本の列に分けて、写真と文字の箱で使う列を少し重ねる */
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  max-width: 560px;
}
.kd-ov-story img {
  grid-column: 1 / 9;
  grid-row: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}
.kd-ov-text {
  grid-column: 7 / 13;
  grid-row: 1;
  /* 文字の箱を写真より上に */
  z-index: 1;
  padding: 16px 18px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 40, 58, .16);
}
.kd-ov-en {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #0369A1;
}
.kd-ov-ttl {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: #10283A;
}
.kd-ov-txt {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #33495B;
}
/* 狭い画面では、写真を全幅にして、文字の箱を下にずらして重ねる */
@media (max-width: 600px) {
  .kd-ov-story img { grid-column: 1 / 13; }
  .kd-ov-text { grid-column: 2 / 12; grid-row: 2; margin-top: -32px; }
}

4. 大きな写真に丸い写真を重ねる

大きな写真と小さな写真を同じマスに置き、小さいほうを justify-self: end と align-self: end（マスの中で右・下に寄せる指定）で右下の角へ寄せます。大きな写真の幅を82%にしているので、右側の18%に丸い写真がはみ出して見えます。丸い形は border-radius: 50% と aspect-ratio: 1 / 1（縦横を同じ長さにする指定）で作っています。

HTML

<div class="kd-ov-badge">
  <img class="kd-ov-main" src="画像1のURL" alt="画像1の内容" width="1200" height="800">
  <img class="kd-ov-sub" src="画像2のURL" alt="画像2の内容" width="1200" height="800">
</div>

CSS

.kd-ov-badge {
  display: grid;
  max-width: 420px;
}
.kd-ov-badge img {
  grid-area: 1 / 1;
  display: block;
  box-sizing: border-box;
  height: auto;
  object-fit: cover;
}
.kd-ov-main {
  width: 82%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
}
.kd-ov-sub {
  /* 小さい丸い写真を、右下の角に寄せる */
  justify-self: end;
  align-self: end;
  width: 36%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 6px solid #FFFFFF;
  box-shadow: 0 8px 20px rgba(16, 40, 58, .2);
}

仕組み：同じマスに置くと、重なる

グリッドは、同じマスに2つ置ける

グリッド（display: grid）は、ふつうは項目を1マスずつ順に並べます。でも、grid-area や grid-column で置き場所をはっきり決めると、2つ以上の項目を同じマスに置けます。MDNのグリッドの基本の説明でも、項目は同じマスに置けて、そのときは重なる、とされています。

1・2・4は、全部の写真に grid-area: 1 / 1 を付けています。これは「1行目・1列目のマスに置く」という意味です。マスは1つしかないので、写真はすべて同じ場所に重なります。そこから justify-self（左右の寄せ方）と align-self（上下の寄せ方）、margin-top（上の余白）で、1枚ずつ位置をずらしています。

3は少し違う作り方です。横を12本の列に分けて、写真には1〜8列目、文字の箱には7〜12列目を使わせています。7〜8列目だけが重なるので、写真の右端に文字の箱が少しかかる形になります。重ねる量は、列の番号を変えるだけで調整できます。

上に来るのは、あとに書いたもの

重なったとき、何もしなければ、HTMLであとに書いたものが上に表示されます（MDNの説明どおりです）。1では、2枚目の画像が1枚目の上に乗っています。順番を変えたいときは z-index（重なる順番の指定）を使います。数字が大きいほうが上です。MDNによると、z-index はグリッドの項目なら position を付けなくても効きます。

position: absolute で重ねない理由

写真を重ねる方法として、position: absolute（親を基準に、好きな位置に置く指定）もよく使われます。ただ、absolute で置いた要素は、親の高さの計算に入りません。全部の写真を absolute にすると、親の高さが0になり、下の文章が写真の上に重なってしまいます。そのため、親に高さを決め打ちで書くことになり、画面の幅が変わったときに合わなくなります。

グリッドの同じマスに置く方法なら、マスの高さは、中に入っている写真のうち一番高いもの（余白も含む）に合わせて決まります。画面の幅が変わって写真が小さくなっても、親の高さが一緒に変わるので、下の文章とぶつかりません。

写真の比率は aspect-ratio と object-fit でそろえる

どの見本も、写真に aspect-ratio（縦横の比率）と object-fit: cover（比率を保ったまま枠いっぱいに広げる指定）を付けています。縦長や横長の写真が混ざっても、重ねたときの形がくずれません。くわしくは、19回目の画像の比率をそろえる記事で書いています。

数値を変えるとどうなるか

写真の幅と、重なる量（1）

幅50%：ほぼ重ならない

幅64%（見本）

幅84%：下の写真が隠れる

2枚の写真の幅を50%にすると（左）、ほとんど重ならず、ただ斜めに並べたように見えます。84%にすると（右）、下の写真がほとんど隠れて、何の写真か分かりにくくなります。下の写真が半分以上見えている状態が、重ねた意味が伝わる目安です。

かたむける角度（2）

0度：ただ重なっている

-6〜8度（見本）

-18〜24度：散らかって見える

0度（左）では、写真がただ重なっているだけに見えます。-18〜24度（右）まで大きくかたむけると、写真の角が台からはみ出し、散らかった印象になります。見本の -6〜8度くらいが、「わざと置いた」ように見える範囲です。

どちらを上にするか（3）

文字の箱に z-index: 1（見本）

写真のほうを上にした場合

文字の箱が写真の下に回ると（右）、文字の一部が隠れて読めなくなります。重ねるときは、文字を読ませたい箱のほうに z-index を付けて、上に来るようにします。

変えるところ	指定	今回の値	目安
重なる量	写真の width	64%	下の写真が半分以上見える幅
ずらす量	margin-top	22%	15〜30%（横幅に対する割合）
かたむき	rotate	-6deg / 3deg / 8deg	10度以内。向きを1枚ずつ変える
文字の箱の重なり	grid-column	7 / 13（2列ぶん重なる）	12列のうち2〜3列

スマホと、見る人への配慮

狭い画面では、重ね方を変える

3のように写真の横に文字の箱を重ねる形は、スマホの幅だと文字の箱が細くなり、1行に数文字しか入らなくなります。見本では、画面が600px以下のときに写真を全幅にして、文字の箱を写真の下に少しだけ重ねています。1・2・4は、幅を%で決めているので、そのまま縮みます。スマホで見たときに、写真が小さくなりすぎていないかを確かめます。

読み上げは、HTMLの順番どおり

重ね方を変えても、読み上げソフトやTabキーで移動する順番は、HTMLに書いた順番のままです。MDNのグリッドとアクセシビリティの説明でも、見た目の並びではなく、HTMLの順番が意味のある順番になっているかを確かめるよう書かれています。3なら、写真のあとに文字の箱を書くと「写真の説明→見出し」の順に読まれます。

見た目のための写真は alt=””

重ねた写真が雰囲気を伝えるためだけのものなら、W3Cの説明のとおり alt=""（空の代わりの文章）にして、読み上げソフトに読ませないようにします。写真に意味がある場合（施工事例の「完成した部屋」など）は、1枚ずつ内容を書きます。

写真をリンクにするときは、選んだときの枠に注意

重なった写真をそれぞれリンクにすると、下にある写真をTabキーで選んだとき、フォーカスの枠（今どこを選んでいるかを示す線）が上の写真に隠れることがあります。リンクにするなら、a:focus-visible { z-index: 3; } のように、選んだ写真を一番上に出す指定を足します。

やりすぎ注意

重ねる写真は2〜3枚までにします。4枚以上になると、どの写真も一部しか見えなくなります。かたむける並べ方も、1ページに1か所にしておくと、そこが目に留まります。

写真を重ねると、写真の一部は必ず隠れます。
「隠れても困らない写真か」を先に決めてから、重ねる量を決めます。

AIに頼むなら

写真を重ねるレイアウトは、Claudeなどの生成AIに頼むとすぐ作ってもらえます。そのときは「何枚を、どう重ねるか」と「狭い画面でどうするか」まで伝えると、手直しが少なく済みます。

写真の右側に、見出しと短い文章の白い箱を少し重ねるレイアウトをCSSで作って。
position: absolute は使わず、グリッドの列を重ねる形で。文字の箱が写真より上に来るようにして、
画面が600px以下のときは写真を全幅にして、文字の箱を写真の下に少し重ねて。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

position: absolute と、決め打ちの高さが入っていないか。height: 400px のような高さが親に付いていると、画面の幅が変わったときに、写真が切れたり、下の文章と重なったりします
スマホ幅で、文字の箱が細くなりすぎていないか。いちばん狭い幅で、見出しが1行に数文字しか入らない状態になっていないかを見ます
文字が写真の下に隠れていないか。写真を差しかえたり、文章を長くしたりしても、文字の箱が上に来ていて読めるかを確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

トップページの「私たちについて」。3の形で、仕事場の写真に短い紹介文を重ねます。写真と文章が1つのまとまりに見えるので、読む人の目が文章へ移ります
施工事例や商品の「全体」と「細かいところ」。4の形で、全体の写真に、細部の写真を丸く重ねます。2枚の関係が、説明しなくても伝わります
イベントや採用ページの雰囲気づくり。2の形で、写真を少しかたむけて散らします。かしこまった印象をやわらげたいページに向いています

使わない場面

商品やプランを比べてほしい一覧。重ねると一部が隠れるので、同じ大きさで並べます（15回目のグリッドでカードを並べる記事の形）
説明や手順のための写真。「ここを押す」のように細部を見てほしい写真は、隠れる部分があると困るので、重ねずに1枚ずつ大きく見せます
人の顔が写っている写真の上に、別の写真や文字を重ねること。顔が隠れる位置になっていないか、写真を差しかえたときも確かめます

KAKERUなら、重ねる並べ方は「ページの入口」にだけ使います。
中身を読んでもらう場所では、写真は重ねずに、1枚ずつはっきり見せます。

まとめ

写真は grid-area: 1 / 1 で同じマスに置くと重なる。ずらすのは justify-self・align-self・margin
列を12本に分けて、使う列を少し重ねると、写真に文字の箱を重ねられる
上に来るのは、HTMLであとに書いたもの。変えたいときは z-index（グリッドの項目なら position なしで効く）
position: absolute と違い、親の高さが中身に合わせて決まるので、画面の幅が変わってもくずれにくい
重ねるのは2〜3枚まで。スマホ幅と、読み上げ・Tabキーの順番も確かめる

まずは1のコードをコピーして、手元の写真2枚で試してみてください。写真の幅と margin-top の数字を少しずつ変えると、重ね方の感覚がつかめます。

参考にした資料

いずれも2026年11月2日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「Basic concepts of grid layout」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Basic_concepts
※グリッドの項目は同じマスに置けて、重なったときは、あとに書いたものが上に表示されること。z-index で順番を変えられること
MDN「grid-area」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-area
※項目をグリッドのどこに置くかを決める指定。Baseline Widely available（2017年10月から主なブラウザで使える）
MDN「justify-self」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/justify-self
※グリッドの項目を、マスの中で左右どこに寄せるかを決める指定
MDN「z-index」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/z-index
※position を付けた要素のほか、フレックスやグリッドの項目にも使えること
MDN「rotate」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/rotate
※要素をかたむける指定。Baseline Widely available（2022年8月から主なブラウザで使える）
MDN「object-fit」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit
※cover で、画像の比率を保ったまま枠いっぱいに広げ、はみ出した部分を切ること
MDN「Grid layout and accessibility」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Accessibility
※見た目の並びを変えても、HTMLの順番（読む順番）は変わらないこと。Tabキーで順番を確かめること
W3C WAI「Decorative Images」（英語）
https://www.w3.org/WAI/tutorials/images/decorative/
※見た目のためだけの画像は alt=”” にして、読み上げソフトに読ませないこと