重なりセクション（ネガティブマージン）
重なりセクションは、上のブロックに後ろのカードが少しめり込んで乗る、奥行きのあるレイアウトです。この実装は CSS だけで、仕掛けはネガティブマージン一点。下のカード .ov__b に margin-top をマイナス値（ここでは -50px ）で与えることで、上のブロックの領域に食い込ませています。
解説
重なりセクションは、上のブロックに後ろのカードが少しめり込んで乗る、奥行きのあるレイアウトです。この実装は CSS だけで、仕掛けはネガティブマージン一点。下のカード .ov__b に margin-top をマイナス値（ここでは -50px）で与えることで、上のブロックの領域に食い込ませています。さらに box-shadow で影を落とし、カードが手前に浮いて見えるよう立体感を補強しています。position:relative を添えて重なり順も安定させています。
効果的な使い方
- ヒーローの直下に内容カードを乗せて導入をつなぐ
- 画像セクションとテキストカードの境目に動きを出す
- 料金表やプロフィールを背景に重ねて見せる
めり込む量は margin のマイナス値、左右の引き込みは横方向のマージン、浮き具合は box-shadow の強さで調整できます。重なり量を大きくしすぎると下の文字が隠れることがあるため、文章量に合わせて控えめに設定するのが安全です。狭い画面では引き込み幅を小さくすると窮屈になりません。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
どのくらい重ねるか変えられますか
はい。下カードの margin の上方向マイナス値を変えるだけです。-50pxを-30pxにすれば控えめ、-80pxにすれば大きく食い込みます。
カードが浮いて見えないのですが
box-shadow を強めてみてください。影の広がりと濃さを増やすと手前に浮き上がる立体感が出ます。背景との色のコントラストも効果に影響します。