テーブル・一覧コード生成用
履歴・アクティビティの一覧
「誰が・何を・いつ」を、時系列で並べる。
用途・説明
操作の履歴やお知らせを、新しい順に縦の線でつないで並べる一覧を作成します。「誰が・何を・いつ」したかが分かるため、チームで使うツールの更新履歴や、注文の対応状況、申請の経過などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[履歴のリスト]- 誰が・何を・いつ を8件程度
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「履歴・アクティビティの一覧」を実装してください。 ## 表示内容 [履歴のリスト] （各行：点、内容（誰が・何を）、日時） - 日付が変わるところに、「今日」「昨日」「10月1日」の区切りを入れる - 最後に「さらに読み込む」のボタン ## レイアウト - 最大幅 640px - 左に縦線と点、その右に内容。日時は右端に寄せる（スマホでは内容の下） - 行の間隔 20px ## デザイン - 縦線：太さ 1px、色 #DCE4F0。最初の点から最後の点までをつなぐ - 点：12px の円、背景 #FFFFFF、#1463F0 の25%の淡い色の線（2px） - いちばん新しい行の点：#1463F0 で塗りつぶす - 内容：14px、line-height 1.7、色 #47566E。人の名前と、対象の名前は font-weight 700・色 #1B2A44 - 対象の名前がリンクの場合は、色 #1463F0 - 日時：12px、色 #8A96AA - 日付の区切り：12px、font-weight 700、色 #5F6D84、背景 #F1F4F9、角丸 999px、padding 2px 12px - 重要な出来事（削除、権限の変更など）は、点のかわりに小さなアイコンを表示できるようにする ## 動作 - 日時は、24時間以内は「10分前」「3時間前」、それより前は「10月1日 14:30」と表示する - 同じ人が続けて同じ種類の操作をしたときは、1行にまとめる（例：「3件のファイルを追加」） - 「さらに読み込む」で、続きを下に追加する。読み込み中はボタンを無効にする - すべて読み込んだら、ボタンを消して「これ以上の履歴はありません」と表示する ## アクセシビリティ - リストは ol / li（時系列の順に意味があるため） - 日時は time 要素（datetime 属性つき）。「10分前」の表示には、title 属性で正確な日時を添える - 縦線と点は装飾として扱う - 追加で読み込んだ件数を aria-live="polite" で伝える ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。