右側に写真カードのヒーロー
右側に写真カードを浮かべたヒーローは、 grid-template-columns:1.2fr 1fr の 2 カラムで左にメッセージ、右に写真カードを配置した構成です。カード（ .hero-pc__card ）には初期状態で transform:rotate(-2deg) を当てて少し傾け、 :hover で r…
解説
右側に写真カードを浮かべたヒーローは、grid-template-columns:1.2fr 1fr の 2 カラムで左にメッセージ、右に写真カードを配置した構成です。カード（.hero-pc__card）には初期状態で transform:rotate(-2deg) を当てて少し傾け、:hover で rotate(0) に戻す transition を組み込んでいます。これにより、マウスを乗せるとカードがすっと正面を向く小さなインタラクションが生まれます。下部キャプションには受講者数などの実績数字を添えられます。
向いている場面
- スクール・教育サービスで講師やレッスン風景を見せたいとき
- 人材・採用サイトで働く人の写真を主役にしたいとき
- DTC ブランドで商品の質感を大きく伝えたいとき
写真は .hero-pc__photo のグラデーション背景を実画像（background-image や <img>）に差し替えて使います。aspect-ratio:1 で正方形に保たれるため、トリミングのズレが起きにくい設計です。傾き角度は rotate(-2deg) の値で調整できます。モバイルでは横並びが窮屈になるので、grid-template-columns を 1 列に切り替えるメディアクエリの追加を推奨します。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
カードのホバーで回転する動きを止めるには？
カードの transition と :hover の rotate を削除し、初期の transform:rotate(-2deg) も外せば、傾きのない静止したカードになります。傾きだけ残して動きを消すこともできます。
写真はどこに入れますか？
.hero-pc__photo のグラデーション背景を、実際の画像を指定した background-image に置き換えるか、その中に img 要素を入れます。aspect-ratio で正方形が保たれます。