見出しコード生成用
左ラインと淡い背景の見出し
左の縦線と薄い色の帯で、記事の区切りをはっきりと。
用途・説明
左端に太めの縦線、背景に淡い色の帯を敷いた見出しです。ブログやお知らせ記事の大見出しとして、話題の切り替わりをはっきり見せたいときに使います。見出しが2行に折り返しても、縦線と背景が崩れない指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：料金プランの選び方
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはブログのデザインに詳しいフロントエンドエンジニアです。 以下の条件で「左ラインと淡い背景の見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] ## デザイン - 左に 5px の縦線（#1463F0） - 背景に #1463F0 の6%程度の淡い色 - padding 14px 18px、角丸は右側のみ 6px - 文字：PC 24px / スマホ 20px、font-weight 700、line-height 1.5、色 #1B2A44 ## 余白 - 上の余白 64px、下の余白 24px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - 縦線は border-left で描き、HTMLに装飾用の要素を足さない - 見出しが2行以上に折り返しても、縦線と背景が見出し全体の高さに揃うこと - 目次などのページ内リンクで飛んだとき、固定ヘッダーに隠れないよう scroll-margin-top を指定する ## アクセシビリティ - 見出しは h2 でマークアップする - 文字と淡い背景のコントラスト比は 4.5:1 以上 ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - 色・線の太さ・余白をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。