見出しコード生成用
2色の下線の見出し
下線の左端だけ色を変えて、さりげないアクセントに。
用途・説明
見出しの下に細い線を引き、その左端だけをメインカラーにした見出しです。主張しすぎないので、記事の中見出しや、カード・サイドバーのタイトルなど、いろいろな場所に置けます。色の付いた部分の長さは自由に変えられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：導入までの流れ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「2色の下線の見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] ## デザイン - 見出しの下に、幅100%・太さ 2px の線（#DCE4F0） - その線の左端 3em ぶんだけ、#1463F0 の線を重ねる - 文字と線の間隔（padding-bottom）は 10px - 文字：PC 20px / スマホ 18px、font-weight 700、line-height 1.5、色 #1B2A44 ## 余白 - 上の余白 48px、下の余白 20px ## 実装方法 - グレーの線は border-bottom、色の付いた線は ::after の疑似要素で描く - 疑似要素は position: absolute で、グレーの線にぴったり重なる位置（bottom: -2px）に置く - 見出しが2行に折り返しても、線は最終行の下に1本だけ表示されること - 色の付いた線の長さは、文字数に関係なく一定にする ## アクセシビリティ - 見出しは h3 でマークアップする（置く場所の階層に合わせて変更してよい） - 線は装飾なので、スクリーンリーダーに読み上げられない実装にする ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - 線の色・太さ・色の付いた部分の長さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。