見出しコード生成用
STEPバッジ付きの見出し
「STEP 1」のバッジで、手順の流れを見せる。
用途・説明
見出しの上に「STEP 1」のような小さなバッジを添えた見出しです。使い方、申し込みの流れ、レシピ、設定手順など、順番に読んでほしい記事の見出しに向いています。補足の一文も添えられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：アカウントを作成する
[ステップ番号]- 例：STEP 1
[補足文]- 見出しを補う一文。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはブログのデザインに詳しいフロントエンドエンジニアです。 以下の条件で「STEPバッジ付きの見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - バッジ：[ステップ番号] - 補足文：[補足文] ## デザイン - バッジ：#1463F0 の背景に白文字（#FFFFFF）、11px、font-weight 700、letter-spacing 0.1em、padding 3px 12px、角丸 9999px - バッジの下 8px に見出し。文字：PC 20px / スマホ 18px、font-weight 700、line-height 1.5、色 #1B2A44 - 補足文：14px、line-height 1.8、色 #5F6D84、見出しの下 6px ## 余白 - 上の余白 56px、下の余白 16px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - バッジは見出しの中の span とし、「STEP 1 アカウントを作成する」と続けて読み上げられるようにする - 番号は手入力せず、CSSカウンターで自動的に振る方法も併記する - 補足文は見出しの外の p 要素にする ## アクセシビリティ - 見出しは h3 でマークアップする（置く場所の階層に合わせて変更してよい） - 白い文字と #1463F0 のコントラスト比が 4.5:1 以上になること ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - バッジの色・文字サイズ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。