カードコード生成用
イベント・セミナーカード
日付・タイトル・場所・状態をまとめた告知カード。
用途・説明
セミナー、ワークショップ、ライブ、説明会などの告知に使うカードを作成します。左に日付のブロック、右にタイトル・時間・場所を置き、「受付中」「満席」などの状態も表示します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[イベントデータの例]- 日付・タイトル・時間・場所・状態を3件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「イベント・セミナーカード」を実装してください。 ## 表示内容 [イベントデータの例] （各カード：日付、状態ラベル、タイトル、時間、場所） ## レイアウト - カードは縦に並べる。カード間隔 16px - カード内は左に日付ブロック、右に 状態ラベル → タイトル → 時間と場所 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 20px - 日付ブロック：幅 64px、背景 #1463F0、文字 #FFFFFF、角丸 10px、中央揃え。上に月（11px・英字3文字）、下に日（24px、font-weight 700） - 状態ラベル：11px、font-weight 700、文字 #1463F0、#1463F0の10%の背景、角丸 9999px（例：受付中） - タイトル：16px、font-weight 700、line-height 1.5、色 #1B2A44 - 時間と場所：13px、色 #5F6D84。それぞれ小さなアイコンを添える ## 状態 - hover：枠線を #1463F0 に - 満席・終了：日付ブロックと状態ラベルをグレー（#9AA5B8）に変える - focus-visible：カード全体を 2px のアウトラインで囲む ## マークアップ・アクセシビリティ - 一覧は ul / li、各カードは article 要素、タイトルは h3 - 日付は time 要素でマークアップし、datetime 属性に年月日と時刻を入れる - 状態は色だけでなく文字（受付中・満席）で伝える ## 出力形式 - [使用技術]のコードを1つ出力 - イベントデータを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。