見出しコード生成用
背景に大きな英字を敷く見出し
淡い英字を後ろに重ねて、奥行きのあるセクション見出しに。
用途・説明
見出しの背後に、淡い色の大きな英字を重ねるセクション見出しです。コーポレートサイトや採用サイトで、ABOUT・SERVICE・RECRUIT などセクション名を印象づけたいときに使います。背景の英字がレイアウトを押し広げたり、読み上げで重複したりしないための指定を含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[英字]- 背景に敷く英単語。例：ABOUT
[見出しテキスト]- 例：私たちについて
[サブテキスト]- 見出しの下の補足文。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「背景に大きな英字を敷くセクション見出し」を実装してください。 ## 表示内容 - 背景の英字：[英字] - 見出し：[見出しテキスト] - サブテキスト：[サブテキスト] ## レイアウト - 中央揃え。背景の英字の上に、見出しとサブテキストを重ねる - 見出しは、背景の英字の下半分に重なる位置に置く - 背景の英字は position: absolute で配置し、見出しブロックの高さや幅に影響させない - 英字が画面幅より広くなっても横スクロールが出ないよう、親要素で overflow を制御する ## デザイン - 背景の英字：clamp(64px, 14vw, 160px)、font-weight 800、line-height 1、letter-spacing 0.02em、 色は #1463F0 の8〜10%程度のごく淡い色 - 見出し：PC 32px / スマホ 24px、font-weight 700、色 #1B2A44 - サブテキスト：15px、色 #5F6D84、見出しの 12px 下 - 背景の英字は選択できないようにする（user-select: none） ## 実装方法 - 背景の英字は data 属性に入れて疑似要素の content: attr() で表示するか、aria-hidden="true" を付けた span で実装する - どちらの方法でも、見出し（h2）の中には英字を含めない ## アクセシビリティ - 背景の英字は装飾なので、スクリーンリーダーに読み上げさせない - 見出しの文字と、その下に重なる英字の色とのコントラスト比が 4.5:1 以上になること - 見出しは h2 でマークアップする ## 出力形式 - [使用技術]のコードを1つ出力 - 英字のサイズと濃さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。