見出しコード生成用
「Q」付きの質問見出し
大きな「Q」を頭に置いた、Q&A記事の見出し。
用途・説明
文字の左に大きな「Q」を置いた、質問形式の見出しです。よくある質問のページ、お悩み相談、Q&A形式のブログ記事など、質問と答えを交互に並べるページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：無料プランでも商用利用できますか？
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはブログのデザインに詳しいフロントエンドエンジニアです。 以下の条件で「「Q」付きの質問見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] ## デザイン - 文字の左に「Q」：28px、font-weight 700、色 #1463F0、line-height 1 - 「Q」と文字の間隔は 12px - 文字：PC 19px / スマホ 17px、font-weight 700、line-height 1.6、色 #1B2A44 - 見出しの下に 1px solid #E2E8F0 の線、線までの間隔 12px ## 余白 - 上の余白 40px、下の余白 14px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - 「Q」は ::before の疑似要素で表示し、HTMLの見出しの文言には含めない - 見出しを display: flex にし、「Q」は縮まないよう flex-shrink: 0 を指定する - 見出しが折り返したとき、2行目は文字の位置から始まるようにする - 回答の先頭に「A」を置く場合の、対になるスタイルも併記する ## アクセシビリティ - 見出しは h3 でマークアップする（置く場所の階層に合わせて変更してよい） - 疑似要素の「Q」が読み上げられない環境でも質問だと分かるよう、見出しの文言は疑問文にする ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - 「Q」の色と大きさ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。