見出しコード生成用
左右に線が伸びる中央見出し
文字の両側に細い線を添えて、上品に区切る。
用途・説明
中央の見出しの左右に細い線が伸びる、落ち着いた印象のセクション見出しです。お知らせ一覧やメニュー、ギャラリーなど、強く主張せずにセクションを区切りたい場面に向いています。文字数が変わっても線の長さが自動で調整される実装にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 例：お知らせ
[サブテキスト]- 見出しの下の補足文。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「左右に線が伸びる中央見出し」を実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - サブテキスト：[サブテキスト] ## 実装方法 - 見出し要素を display: flex、align-items: center にし、::before と ::after で左右の線を描く - 線は flex: 1 で残りの幅いっぱいに伸ばし、文字数が変わっても自動で長さが調整されるようにする - 文字と線の間隔は 24px（スマホ 16px） - 線を表現するための空の要素をHTMLに追加しない ## デザイン - 線：高さ 1px、色 #B8C5D9 - 見出し：PC 26px / スマホ 20px、font-weight 700、letter-spacing 0.08em、色 #1B2A44 - サブテキスト：14px、色 #5F6D84、中央揃え、見出しの 12px 下 - 見出し全体の最大幅 720px、中央配置 ## 折り返しへの対応 - 見出しが長くて2行になる場合は、文字部分の最大幅を 70% にして線が消えないようにする - 画面幅 360px 未満では線の最小幅を 24px 確保する ## アクセシビリティ - 見出しは h2 でマークアップする - 線は装飾なので疑似要素で描き、スクリーンリーダーに読み上げさせない ## 出力形式 - [使用技術]のコードを1つ出力 - 線の色・太さ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。