カードコード生成用
お知らせ・補足ボックス
淡い背景とアイコンで、補足や注意を本文から区別する。
用途・説明
記事やページの途中に置く、補足・ヒント・お知らせ用のボックスを作成します。淡い色の背景と左の線、先頭のアイコンで、本文とは別のまとまりだと分かるようにします。ヘルプ記事やマニュアル、ブログのワンポイントに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：ポイント、ご注意ください
[本文]- ボックスに入れる文章
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「お知らせ・補足ボックス」を実装してください。 ## 表示内容 - 見出し：[見出し] - 本文：[本文] ## レイアウト - 左にアイコン、右に見出しと本文 - 横幅は本文と同じ。上下の余白 24px ## デザイン - ボックス：背景は #1463F0 の9%、左に 4px の線（#1463F0）、角丸は右側のみ 8px、padding 16px 20px - アイコン：20px、色 #1463F0（丸の中に「i」） - 見出し：15px、font-weight 700、色 #1B2A44 - 本文：14px、line-height 1.8、色 #47566E。見出しの下 4px ## 状態 - 動きは付けない - 注意（黄色系）・警告（赤系）の色違いを、CSS変数の差し替えだけで作れるようにする ## マークアップ・アクセシビリティ - 補足は aside 要素、または role="note" でマークアップする - アイコンは装飾なので aria-hidden="true" を付け、種類は見出しの文字で伝える - 本文と淡い背景のコントラスト比は 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 色・線の太さ・余白をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。