ナビゲーションコード生成用
ロゴを中央に置いたヘッダー
ロゴを真ん中に、メニューを左右に分けた上品な構成。
用途・説明
ロゴを中央に置き、メニューをその左右に振り分けたヘッダーを作成します。ブランドの名前を主役にしたいアパレル、雑貨、レストラン、サロンなどのサイトに向いています。左右の項目数をそろえることで、バランスよく見えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- 中央のロゴに表示する名前
[左のメニュー]- 例：コンセプト、メニュー
[右のメニュー]- 例：アクセス、ご予約
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ロゴを中央に置いたヘッダー」を実装してください。 ## 表示内容 - 中央：ロゴ（テキスト「[サービス名]」で代用） - 左側：[左のメニュー] - 右側：[右のメニュー] ## レイアウト - CSS Grid の3列（1fr auto 1fr）。左のメニューは右寄せ、右のメニューは左寄せにして、ロゴに寄せる - ロゴとメニューの間隔 48px、メニューの項目の間隔 32px - 高さ 80px、下に 1px solid #E2E8F0、背景 #FFFFFF ## デザイン - ロゴ：24px、セリフ体、letter-spacing 0.12em、色 #1B2A44 - メニュー：14px、letter-spacing 0.1em、色 #1B2A44 - hover・現在のページ：文字色 #1463F0、下に 1px の線（文字の下 6px） ## レスポンシブ - 768px 未満：ロゴを中央に残し、左端にハンバーガーメニューのボタン、右端に予約などの主要なボタン（アイコン）を1つ置く - メニューは左から開くパネルにまとめる ## アクセシビリティ - header 要素を使い、左右のメニューは見た目が分かれていても1つの nav 要素（aria-label="メインメニュー"）のなかの1つの ul にまとめる。ロゴは nav の外に置き、CSSで中央に配置する - 読み上げとタブキーの順番が、ロゴ → 左のメニュー → 右のメニュー の順になるようにする - 現在のページには aria-current="page" - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。