見出しコード生成用
3つのドットを添えた中央見出し
見出しの下に小さなドットを3つ。やわらかい中央見出し。
用途・説明
中央揃えの見出しの下に、小さな丸を3つ並べた見出しです。サロン、カフェ、教室、クリニックなど、やわらかく親しみやすい雰囲気のサイトのセクション見出しに向いています。補足の一文も添えられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：メニュー
[補足文]- 見出しを補う一文。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「3つのドットを添えた中央見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - 補足文：[補足文] ## デザイン - 見出し：PC 26px / スマホ 22px、font-weight 700、letter-spacing 0.08em、色 #1B2A44、中央揃え - 見出しの下 14px に、直径 6px の丸を3つ、間隔 8px で横に並べる。中央の丸は #1463F0、左右は #1463F0 の30%程度の淡い色 - 補足文：14px、line-height 1.8、色 #5F6D84、ドットの下 14px ## 余白 - 上の余白 80px、下の余白 32px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - ドットは ::after の疑似要素1つで描く（radial-gradient を3つ重ねる、または box-shadow で複製する） - HTMLに装飾用の要素を足さない。「・・・」などの文字も使わない - 補足文は見出しの外の p 要素にする ## アクセシビリティ - 見出しは h2 でマークアップする（置く場所の階層に合わせて変更してよい） - ドットは装飾なので、スクリーンリーダーに読み上げられない実装にする ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - ドットの色・大きさ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。