カードコード生成用
横並びの記事カード
左にサムネイル、右に文字。縦に並べやすい記事カード。
用途・説明
サムネイルを左、タイトルや日付を右に置いた横長の記事カードを作成します。お知らせ一覧、関連記事、サイドバーの人気記事など、縦に何件も並べる場面に向いています。スマホでも横並びのまま読みやすいサイズに調整します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[記事データの例]- タイトル・カテゴリ・日付・画像URLを3件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「横並びの記事カード」を実装してください。 ## 表示内容 [記事データの例] （各カード：サムネイル画像、カテゴリ、タイトル、公開日） ## レイアウト - カードは縦に並べる。カード間隔 16px - カード内は左にサムネイル（幅 PC 200px / スマホ 112px）、右に カテゴリ → タイトル → 公開日 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow hidden - サムネイル：aspect-ratio 4 / 3、object-fit: cover。カードの高さいっぱいに表示 - カテゴリ：11px、font-weight 700、文字 #1463F0、#1463F0の10%の背景、角丸 9999px - タイトル：16px（スマホ 14px）、font-weight 700、line-height 1.6、色 #1B2A44、最大2行で省略 - 公開日：12px、色 #5F6D84 - 文字エリアの padding は 16px 20px（スマホ 12px） ## 状態 - hover：サムネイルを 1.04 倍にゆっくり拡大し、タイトルの色を #1463F0 に - focus-visible：カード全体を 2px のアウトラインで囲む ## マークアップ・アクセシビリティ - 一覧は ul / li、各カードは article 要素、タイトルは h3 - リンクはタイトルの a 要素1つだけにし、疑似要素でクリック範囲をカード全体に広げる - 公開日は time 要素に datetime 属性を付ける ## 出力形式 - [使用技術]のコードを1つ出力 - 記事データを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。