見出しコード生成用
ラベルタブ付きの見出し
「POINT」などの小さなタブを上にのせた枠見出し。
用途・説明
枠で囲んだ見出しの左上に、「POINT」「CHECK」などの小さなラベルをタブのようにのせた見出しです。記事の中の要点、注意点、まとめなど、読み飛ばしてほしくない箇所の見出しに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：ここがポイント
[ラベル]- タブに入れる短い英字や言葉。例：POINT、CHECK、まとめ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはブログのデザインに詳しいフロントエンドエンジニアです。 以下の条件で「ラベルタブ付きの見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - ラベル：[ラベル] ## デザイン - ラベル：#1463F0 の背景に白文字（#FFFFFF）、11px、font-weight 700、letter-spacing 0.1em、padding 3px 12px、角丸は上側のみ 6px - 見出しの枠：2px solid #1463F0、角丸は左上以外 8px、padding 12px 18px。ラベルは枠の左上にすき間なく接する - 文字：PC 19px / スマホ 17px、font-weight 700、line-height 1.5、色 #1B2A44 ## 余白 - 上の余白 48px、下の余白 20px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - ラベルは見出しの中の span としてマークアップし、見出しの文言と続けて読み上げられるようにする - ラベルと枠の左端をそろえる - 見出しが折り返しても、ラベルの位置が変わらないこと ## アクセシビリティ - 見出しは h3 でマークアップする（置く場所の階層に合わせて変更してよい） - 白い文字と #1463F0 のコントラスト比が 4.5:1 以上になること ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - 色・枠の太さ・ラベルの文字サイズをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。