カードコード生成用
お知らせの一覧カード
日付・カテゴリ・タイトルを1行ずつ並べた、新着情報の枠。
用途・説明
トップページに置く「お知らせ」「新着情報」の一覧を、1枚のカードにまとめて作成します。日付、カテゴリのラベル、タイトルを1行に並べ、行ごとに詳細ページへリンクします。コーポレートサイト、店舗、学校、自治体のサイトなど、更新情報を定期的に載せるサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[お知らせ]- 日付・カテゴリ・タイトルを3〜5件
[一覧ページの文言]- 例：お知らせ一覧へ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「お知らせの一覧カード」を実装してください。 ## 表示内容 [お知らせ] （各行：日付、カテゴリのラベル、タイトル） - カードの右上、または下に「[一覧ページの文言]」のリンク ## レイアウト - 1枚のカードのなかに行を縦に並べ、行の間は 1px solid #E2E8F0 で区切る - PC：日付 → ラベル → タイトル を横1行に。タイトルは残りの幅いっぱい - スマホ：1段目に日付とラベル、2段目にタイトル ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 8px 24px - 各行：上下 padding 16px - 日付：13px、色 #5F6D84、幅を固定（7em）して縦にそろえる - ラベル：11px、font-weight 700、padding 2px 10px、角丸 999px、背景は #1463F0 の9%の淡い色、文字 #1463F0。幅を固定する - タイトル：15px、色 #1B2A44。PCでは1行で省略（…）、スマホでは2行まで - hover：タイトルの色を #1463F0 に ## アクセシビリティ - 一覧は ul / li。各行はタイトルを a 要素にし、行全体をクリックできるようにする - 日付は time 要素（datetime 属性付き）にする - 新着を示す「NEW」を付ける場合は、色だけでなく文字で示す ## 出力形式 - [使用技術]のコードを1つ出力 - お知らせを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。