見出しコード生成用
短い上ラインの見出し
文字の上に短い線を1本。ミニマルなセクション見出し。
用途・説明
見出しの左上に短い線を1本だけ置いた、ミニマルなセクション見出しです。コーポレートサイトやサービスサイトの各セクション、ポートフォリオなど、余白を活かした落ち着いたデザインに向いています。補足の一文も添えられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：サービスの特徴
[補足文]- 見出しを補う一文。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「短い上ラインの見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - 補足文：[補足文] ## デザイン - 見出しの上に、幅 40px・高さ 4px の線（#1463F0、角丸 9999px）。左揃え - 線と見出しの間隔は 16px - 文字：PC 28px / スマホ 22px、font-weight 700、line-height 1.4、色 #1B2A44 - 補足文：15px、line-height 1.8、色 #5F6D84、見出しの下 10px ## 余白 - 上の余白 80px、下の余白 32px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - 線は ::before の疑似要素で描き、HTMLに装飾用の要素を足さない - 補足文は見出しの外の p 要素にする - 中央揃えのレイアウトで使う場合は、線も中央に置く指定を併記する ## アクセシビリティ - 見出しは h2 でマークアップする（置く場所の階層に合わせて変更してよい） - 線は装飾なので、スクリーンリーダーに読み上げられない実装にする ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - 線の色・長さ・太さ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。