ブログ記事サマリーカード
サムネイル・カテゴリ・日付・タイトル・抜粋を縦に積んだ、ブログ記事一覧の定番カードです。実装は CSS のみで、上部の aspect-ratio:16/9 によってサムネ枠の比率を固定し、画像が差し替わっても高さがブレません。
解説
サムネイル・カテゴリ・日付・タイトル・抜粋を縦に積んだ、ブログ記事一覧の定番カードです。実装は CSS のみで、上部の aspect-ratio:16/9 によってサムネ枠の比率を固定し、画像が差し替わっても高さがブレません。本体は border-radius と淡い box-shadow でカード化し、ホバー時は transition 付きの translateY(-4px) でわずかに浮き上がり、クリックできることをさりげなく伝えます。
こんな場面で使えます
- オウンドメディアやブログの記事一覧をグリッドで並べるとき
- コーポレートサイトの「お役立ちコラム」セクション
- カテゴリ別アーカイブのカード表示
カスタマイズは max-width:320px を変えれば 1 列あたりの幅を調整でき、親側を Grid にすればレスポンシブな段組みになります。サムネはダミーのグラデーション枠なので、実運用では img に置き換え、alt と width / height を付けてレイアウトシフトを防いでください。カテゴリラベルの背景色を変えるだけでサイトのトーンに馴染みます。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
サムネのグラデーション枠を実際の画像に差し替えられますか。
はい。サムネ枠は aspect-ratio:16/9 で比率を固定しているので、中に img を入れて object-fit:cover を指定すれば、どんな写真でも枠からはみ出さずに収まります。alt と width / height 属性も付けると読み込み時のガタつきを防げます。
JavaScript は必要ですか。
不要です。浮き上がるホバー演出も角丸も影もすべて CSS の transition と box-shadow で作っているため、HTML と CSS を貼るだけで動きます。