見出しコード生成用
吹き出し風の見出し
下に小さなしっぽを付けた、親しみやすい吹き出し。
用途・説明
塗りつぶした帯の左下に小さな三角のしっぽを付けた、吹き出し風の見出しです。やわらかい雰囲気のブログ、Q&A、スタッフの声、初心者向けの解説記事など、話しかけるようなトーンのページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：よくあるお悩み
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはブログのデザインに詳しいフロントエンドエンジニアです。 以下の条件で「吹き出し風の見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] ## デザイン - 背景：#1463F0、角丸 10px、padding 12px 20px - 左下（左端から 28px の位置）に、下向きの三角のしっぽ（幅 16px・高さ 10px、背景と同じ色） - 文字：PC 20px / スマホ 18px、font-weight 700、line-height 1.5、色 #FFFFFF ## 余白 - 上の余白 56px、下の余白 30px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - しっぽは ::after の疑似要素で描く（border または clip-path）。HTMLに装飾用の要素を足さない - しっぽのぶん、見出しの下の余白を 10px 多く取る - 見出しが折り返しても、しっぽの位置が変わらないこと ## アクセシビリティ - 見出しは h2 でマークアップする（置く場所の階層に合わせて変更してよい） - 白い文字と #1463F0 のコントラスト比が 4.5:1 以上になること - しっぽは装飾なので、スクリーンリーダーに読み上げられない実装にする ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - 吹き出しの色・しっぽの大きさと位置をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。