テーブル・一覧コード生成用
ファイルの一覧
種類のアイコン・名前・サイズと、操作メニュー。
用途・説明
ファイルの種類を示すアイコン、ファイル名、サイズ、更新日を並べ、右端のメニューから操作できる一覧を作成します。資料のダウンロードページや、ファイルを扱う管理画面に向いています。長いファイル名でも、拡張子が見えるように省略します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ファイルのリスト]- ファイル名・サイズ・更新日を5件程度
[操作のメニュー]- 例：ダウンロード、名前を変更、削除
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ファイルの一覧」を実装してください。 ## 表示内容 [ファイルのリスト] （各行：種類のアイコン、ファイル名、サイズ、更新日、操作のメニュー） - 操作のメニュー：[操作のメニュー] ## レイアウト - 全体をカードで囲み、行を縦に並べる - 各行：左から 種類のアイコン → ファイル名 → サイズ → 更新日 → メニューのボタン（⋯） - ファイル名が、残りの幅をすべて使う。サイズと更新日は右に寄せる - スマホでは、サイズと更新日をファイル名の下に小さく表示する ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px - 行：高さ 56px、左右padding 16px、下に 1px solid #EDF1F7 - 種類のアイコン：40×32px、角丸 6px、なかに拡張子の文字（PDF、XLS など。11px・font-weight 700）。背景は #1463F0 の9%の淡い色、文字 #1463F0 - ファイル名：15px、色 #1B2A44。長いときは中央を省略し、拡張子は必ず見せる - サイズ・更新日：13px、色 #5F6D84、等幅の数字 - メニューのボタン：32×32px、色 #8A96AA - hover：行の背景を #F7F9FC にする ## 動作 - ファイル名を押すと、ダウンロード（またはプレビュー）する - メニューのボタンを押すと、すぐ下にメニューが開く。外側のクリックと Esc キーで閉じる - サイズは、バイト数から「2.4MB」「88KB」のように、読みやすい単位に変換する - 削除は、「元に戻す」つきの通知か、確認のダイアログのどちらかを挟む ## アクセシビリティ - リストは ul / li。ファイル名は a 要素 - 種類のアイコンは aria-hidden="true" にし、ファイル名に拡張子を含めて種類を伝える - メニューのボタンに aria-label="（ファイル名）の操作"、aria-haspopup="menu"、aria-expanded - メニューは role="menu" / "menuitem"。上下の矢印キーで移動できる - 更新日は time 要素 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。