ナビゲーションコード生成用
ページ内リンクの固定ナビ
長いページの上部に固定し、いま読んでいる場所を示す。
用途・説明
1ページのなかのセクションへ移動するリンクを横に並べ、スクロールに合わせていまのセクションを強調するナビゲーションを作成します。サービス紹介のランディングページ、商品の詳細ページ、採用ページなど、縦に長いページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[セクション名]- 例：特徴、機能、料金、導入事例、よくある質問
[右端のボタン]- 例：資料請求
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ページ内リンクの固定ナビ」を実装してください。 ## 表示内容 - リンク：[セクション名] - 右端のボタン：[右端のボタン] ## デザイン - position: sticky; top: 0。高さ 52px、背景 #FFFFFF、下に 1px solid #E2E8F0 - リンク：14px、色 #5F6D84、左右padding 16px、高さいっぱい - いまのセクション：文字 #1463F0・font-weight 700、下に 2px の線 - hover：文字色 #1B2A44 - ボタン：高さ 36px、背景 #1463F0、文字 #FFFFFF、角丸 999px、13px・font-weight 700 ## 動作 - リンクを押すと、そのセクションへなめらかにスクロールする - IntersectionObserver で各セクションを監視し、画面の上のほうにあるセクションのリンクを強調する - 移動したとき、セクションの見出しがナビに隠れないよう scroll-margin-top を 68px にする - URLのハッシュ（#price など）を更新し、そのURLを開いたときにも正しい位置へ移動する ## レスポンシブ - 項目が入りきらない場合は横スクロールにし、スクロールバーは隠す - いまのセクションのリンクが見える位置に来るよう、ナビを自動で横スクロールさせる - 右端のボタンはスマホでは非表示にする ## アクセシビリティ - nav 要素（aria-label="ページ内メニュー"）のなかの ul / li - いまのセクションのリンクには aria-current="true" - prefers-reduced-motion のときは、なめらかなスクロールをやめる - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。