見出しコード生成用
日付ブロック付きの見出し
日付を四角いブロックにして、お知らせを見やすく。
用途・説明
左に日付を四角いブロックで置き、右に見出しを並べた形です。お知らせ、イベント情報、ブログの記事一覧、活動報告など、日付が大事な情報の見出しに向いています。カテゴリ名も添えられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：春の新メニューがはじまります
[日付]- 例：2026年4月12日
[カテゴリ名]- 例：お知らせ。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはブログのデザインに詳しいフロントエンドエンジニアです。 以下の条件で「日付ブロック付きの見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - 日付：[日付] - カテゴリ：[カテゴリ名] ## デザイン - 日付ブロック：幅 56px、#1463F0 の背景に白文字（#FFFFFF）、角丸 8px、中央揃え。上に月（11px・英字3文字、例：APR）、下に日（22px、font-weight 700） - ブロックと見出しの間隔は 14px - カテゴリ：12px、色 #5F6D84 - 見出し：PC 19px / スマホ 17px、font-weight 700、line-height 1.5、色 #1B2A44。カテゴリの下 2px ## 余白 - 上の余白 40px、下の余白 16px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - 日付は time 要素でマークアップし、datetime 属性に年月日を入れる - 全体を display: flex にし、日付ブロックは縮まないよう flex-shrink: 0 を指定する - 見出しが折り返しても、日付ブロックは上端に揃える ## アクセシビリティ - 見出しは h3 でマークアップする（置く場所の階層に合わせて変更してよい） - 日付ブロックには年が表示されないため、スクリーンリーダー向けに年月日を含むテキストを用意する - 白い文字と #1463F0 のコントラスト比が 4.5:1 以上になること ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - ブロックの色・大きさ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。