レシピカード
料理写真・タイトル・所要時間・難易度を 1 枚にまとめたレシピサマリーカードです。画像枠は aspect-ratio:4/3 で比率を固定し、写真が変わってもカードの高さが安定します。本体下部の meta 行は display:flex と justify-content:space-between で「所要時間」…
解説
料理写真・タイトル・所要時間・難易度を 1 枚にまとめたレシピサマリーカードです。画像枠は aspect-ratio:4/3 で比率を固定し、写真が変わってもカードの高さが安定します。本体下部の meta 行は display:flex と justify-content:space-between で「所要時間」と「難易度」を両端に振り分け、視線の流れを作ります。ホバー時は transition 付きで translateY(-4px) し、リンクであることを伝えます。CSS のみで動作します。
こんな場面で使えます
- レシピメディアや料理ブログの一覧表示
- 飲食店サイトのメニュー紹介カード
- 食材宅配サービスの献立提案リスト
カスタマイズは画像枠のダミーグラデを img に置き換え、object-fit:cover を指定すれば実写が枠いっぱいに収まります。meta の項目はカロリーや人数など別の指標に差し替えても構いません。タイトルの行間は line-height:1.5 で読みやすく保たれているので、2 行になる料理名でも詰まりすぎません。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
所要時間と難易度を別の項目に変えられますか。
変えられます。下部の meta 行は左右に要素を振り分けているだけなので、カロリーや 何人前 といった別の指標に書き換えても見た目は崩れません。3 項目以上にしたいときは gap で間隔を調整してください。
料理写真はどう入れますか。
画像枠は aspect-ratio:4/3 で比率を固定しているので、中に img を入れて object-fit:cover を指定すれば、縦横どちらの写真でも枠に合わせてきれいに切り抜かれます。alt に料理名を入れておくと検索にも有利です。