カードデザインのCSS素材

写真の部分は色の面です。<div class="cs-cd01__img"> の中に <img src="…" alt="…"> を入れると、枠いっぱいに切り抜いて表示します。 列の数は幅に合わせて自動で変わり、タイトルが長くても2行で切って高さをそろえます。

写真の部分は色の面です。<div class="cs-cd02__img"> の中に <img src="…" alt="…"> を入れると、枠いっぱいに切り抜いて表示します。 幅が狭いとき（カードが480px未満）は写真が上に回ります（コンテナクエリ）。

マウスを乗せると少し持ち上がり、影が広がります。キーボードで選んだとき（リンクにフォーカス）も同じ動きになります。

写真の部分は色の面です。<div class="cs-cd04__img"> の中に <img src="…" alt="…"> を入れると、枠いっぱいに切り抜いて表示します。 写真の上の文字は、下に向かって暗くなる面の上に置いているので、明るい写真でも読めます。

マウスを乗せる（スマホではタップする）と裏返って、裏の説明が出ます。カードに tabindex="0" を付けてあるので、キーボードで選んでも裏返ります。

写真の部分は色の面です。<div class="cs-cd07__img"> の中に <img src="…" alt="…"> を入れると、枠いっぱいに切り抜いて表示します。 名前のふりがなは cs-cd07__kana、ひとことは <p> に書きます。

アイコンは短いインラインSVGです。線の色は文字色（currentColor）に合わせて変わります。

backdrop-filter で、カードの後ろをぼかしています。写真や色のある背景の上に置くと効果が分かります。見本の後ろの色の丸は cs-cd09 の背景なので、写真に差し替えてください。

番号は CSS の counter で自動で振っています。カードを足すと 04、05…と続きます。

見出しの <a> の ::after をカード全体に広げて、どこを押してもリンクが開くようにしています。リンクは1つなので、読み上げでも同じ文が何度も読まれません。写真の部分は色の面です。<div class="cs-cd11__img"> の中に <img src="…" alt="…"> を入れると、枠いっぱいに切り抜いて表示します。