カードコード生成用
写真に文字を重ねるカード
写真の下半分を暗くして、白い文字をのせる。
用途・説明
写真をカードいっぱいに表示し、下半分に暗いグラデーションを重ねて白い文字をのせるカードを作成します。施工事例、旅行先、特集、作品紹介など、写真を主役にしたい一覧に向いています。写真の明るさに関係なく文字が読める指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[カードデータの例]- タイトル・ラベル・画像URLを3件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「写真に文字を重ねるカード」を実装してください。 ## 表示内容 [カードデータの例] （各カード：写真、ラベル、タイトル） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カード間隔 20px - 文字は写真の左下に重ねる ## デザイン - カード：角丸 14px、overflow hidden、aspect-ratio 4 / 3 - 写真：カードいっぱいに object-fit: cover - 重ねる色：下から上へ、rgba(11, 18, 32, 0.8) から透明へのグラデーション（カードの下 60%） - ラベル：11px、font-weight 700、背景 #1463F0、文字 #FFFFFF、角丸 9999px - タイトル：18px、font-weight 700、line-height 1.5、色 #FFFFFF、最大2行で省略 - 文字エリアの padding は 20px ## 状態 - hover：写真を 1.05 倍にゆっくり拡大（500ms） - focus-visible：カード全体を 2px のアウトラインで囲む ## マークアップ・アクセシビリティ - 一覧は ul / li、タイトルは h3。カード全体をクリックできるようにする - 白い文字と、グラデーションを重ねた写真とのコントラスト比が 4.5:1 以上になること - 写真の alt は、タイトルと重複する場合は空にする - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - カードデータを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。