ToollyToolly
見出しコード生成用

丸数字付きの見出し

丸い番号を頭に置いて、順番や項目数を伝える。

用途・説明

文字の左に、丸で囲んだ番号を置いた見出しです。「〜する5つの方法」「おすすめ3選」のような、項目を順に紹介する記事の中見出しに向いています。番号はCSSで自動的に振るので、項目を入れ替えても手直しが要りません。

仕上がり例です。使用するAIや指示の解釈によって、実際の出力は異なります。

カラーとサイズを選ぶ

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

カラー
サイズ

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[見出しテキスト]
表示する見出しの文言。例：目的をひとつに絞る
[使用技術]
例：HTML/CSS、React + Tailwind CSS

プロンプト全文

あなたはブログのデザインに詳しいフロントエンドエンジニアです。
以下の条件で「丸数字付きの見出し」を1つ実装してください。

## 表示内容
- 見出し：[見出しテキスト]

## デザイン
- 文字の左に、直径 32px の円（#1463F0）。中に白（#FFFFFF）の数字、15px、font-weight 700
- 円と文字の間隔は 12px
- 文字：PC 20px / スマホ 18px、font-weight 700、line-height 1.5、色 #1B2A44

## 余白
- 上の余白 48px、下の余白 16px
- ページやコンテンツの先頭に置く場合は、上の余白を 0 にする

## 実装方法
- 番号は手入力せず、CSSカウンター（counter-reset / counter-increment）で自動的に振り、::before に表示する
- 見出しを display: flex にし、円は縮まないよう flex-shrink: 0 を指定する
- 見出しが折り返したとき、円は1行目の高さに揃え、2行目は文字の位置から始まるようにする

## アクセシビリティ
- 見出しは h3 でマークアップする（置く場所の階層に合わせて変更してよい）
- 番号が読み上げられない環境に備え、順番が重要な内容は ol / li の中に見出しを置く構成も併記する
- 白い数字と #1463F0 のコントラスト比が 4.5:1 以上になること

## 出力形式
- [使用技術]で、この見出し1つぶんのコードを出力
- クラス名を付け、他の見出しに影響しないようにする
- 円の大きさ・色・間隔をCSS変数にまとめる

使い方

  1. 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
  2. 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
  3. 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。

「見出し」のほかのプロンプト

すべて見る