カードコード生成用
ブログ記事カード
サムネイル・カテゴリ・タイトル・日付の一覧用カード。
用途・説明
ブログやお知らせの一覧に使う記事カードを作成します。サムネイルの比率を固定し、タイトルの行数を制限しているので、画像サイズやタイトルの長さがばらばらでも一覧がきれいに揃います。カード全体をクリックできる実装方法も指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[記事データの例]- タイトル・カテゴリ・日付・画像URLを2〜3件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で、記事一覧に使う「ブログ記事カード」を実装してください。 ## 表示内容 [記事データの例] （各カード：サムネイル画像、カテゴリ、タイトル、公開日） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カード間隔 24px - カード内は上から サムネイル → カテゴリ → タイトル → 公開日 - 公開日は常にカードの下端に揃える ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow hidden - サムネイル：aspect-ratio 16 / 9、object-fit: cover。画像がない場合は淡い色のプレースホルダーを表示 - カテゴリ：11px、font-weight 700、文字 #1463F0、#1463F0の10%の背景、角丸 9999px - タイトル：16px、font-weight 700、line-height 1.6、最大2行で省略（line-clamp） - 公開日：12px、色 #5F6D84 - 本文エリアの padding は 16px 20px 20px ## 状態 - hover：サムネイルを 1.04 倍にゆっくり拡大し、タイトルの色を #1463F0 に - focus-visible：カード全体を 2px のアウトラインで囲む ## マークアップ・アクセシビリティ - 一覧は ul / li、各カードは article 要素、タイトルは h3 - リンクはタイトルの a 要素1つだけにし、疑似要素（::after）でクリック範囲をカード全体に広げる - 公開日は time 要素に datetime 属性を付ける - サムネイルが装飾に近い場合は alt を空に、内容を補う画像なら説明を書く - 画像には width / height と loading="lazy" を指定し、読み込み時のレイアウトのずれを防ぐ - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 記事データを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。