カード スタック影 (重なり風)
1 枚のカードの背後に薄いカードが 2 枚重なって見える、資料束のようなスタイルです。実際には要素は 1 つだけで、 ::before と ::after の擬似要素を本体と同じ白い角丸ボックスとして敷き、わずかにずらして回転させることで重なりを演出しています。
解説
1 枚のカードの背後に薄いカードが 2 枚重なって見える、資料束のようなスタイルです。実際には要素は 1 つだけで、::before と ::after の擬似要素を本体と同じ白い角丸ボックスとして敷き、わずかにずらして回転させることで重なりを演出しています。::before は右下へ translate して少し時計回りに、::after は左下へずらして反時計回りに傾けてあり、両方とも z-index: -1 で本体の後ろに回しています。画像を 3 枚並べていないので DOM は軽く、装飾だけで束ねた厚みを表現できます。
向いている場面
- ホワイトペーパーや資料ダウンロードへの導線カード
- 記事一覧で「シリーズもの」「複数枚の事例」を示すサムネ
- 書籍やテンプレート集など、束ねた量感を見せたいリンク
重なりの強さは擬似要素の translate の距離と rotate の角度で決まります。ずらしを大きくすると賑やかに、小さくすると上品になります。影は box-shadow の透明度で軽重を調整してください。注意点として、傾けた擬似要素が親からはみ出すため、隣接要素との余白を少し広めに取らないと重なってしまいます。装飾的な背景なので aria 上は無視され、スクリーンリーダーには本文だけが読まれます。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
重なって見える紙の枚数を増やせますか？
このサンプルは擬似要素 before と after の 2 つで合計 3 枚に見せています。要素は HTML に増やせないため、より多く重ねたい場合は内側に空の div を足してずらすか、影や角度の見せ方を工夫します。実用上は 2 から 3 枚が自然です。
重なりが隣の要素に被ってしまいます。
傾けた擬似要素はカードの枠から少しはみ出すため、周囲の余白が狭いと隣に重なります。カードの外側に margin を広めに確保するか、ずらし量と回転角を小さくして、はみ出しを抑えると解決します。