フッターコード生成用
スマホで開閉するフッター
スマホではリンクを分類ごとにたたんで、短く見せる。
用途・説明
PCでは複数列、スマホでは分類ごとに開閉できるフッターを作成します。リンクの多いサイトでも、スマホでフッターが長くなりすぎるのを防げます。開閉の状態は、画面の幅が変わっても不自然にならないよう指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンクの分類]- 分類名と、それぞれのリンクを3〜5件ずつ
[開始年]- コピーライトの年。例：2026
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「スマホで開閉するフッター」を実装してください。 ## 表示内容 - ロゴ（テキスト「[サービス名]」で代用） - リンク：[リンクの分類] - コピーライト：© [開始年] [サービス名] ## レイアウト - PC（768px以上）：リンクを分類ごとに横に並べ、すべて表示する（開閉なし） - スマホ：分類名を1行ずつ並べ、押すとその下にリンクが開く。行の右端に「＋／−」 - スマホの行の高さは 52px 以上、行の間は 1px の線で区切る ## デザイン - 背景 #1B2A44、文字は白の72% - 分類名：15px、font-weight 700、色 #FFFFFF - リンク：14px、行間 2.2。hover で #FFFFFF と下線 - 区切り線：白の14% - ロゴマークとフォーカスリングは #1463F0 を明るくした色 ## 動作 - スマホ：分類名のボタンで開閉する。高さのアニメーションは 200ms - 最初はすべて閉じた状態 - PCの幅では、開閉の状態に関係なくすべてのリンクを表示する ## アクセシビリティ - スマホの分類名は button 要素にし、aria-expanded と aria-controls を付ける。PCでは見出しとして表示する - 閉じているリンクは、キーボードのフォーカスが当たらないようにする（hidden 属性など） - アニメーションは prefers-reduced-motion で無効化 - 文字と背景のコントラスト比は 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - リンクの分類を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。