フッターコード生成用
言語の切り替えを置いたフッター
フッターの下段に、表示言語を選ぶメニューを添える。
用途・説明
フッターの最下段に、表示言語を切り替えるメニューを置くフッターを作成します。ヘッダーをすっきりさせたまま、多言語に対応できます。海外からの訪問者がいる宿泊施設、観光、メーカー、グローバルなサービスのサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- コピーライトに表示する名前
[リンク項目]- 例：利用規約、プライバシー、お問い合わせ
[対応言語]- 例：日本語、English、简体中文
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「言語の切り替えを置いたフッター」を実装してください。 ## 表示内容 - 左：コピーライト（© 年 [サービス名]） - 中央：リンク（[リンク項目]） - 右：言語の切り替え（地球のアイコンと、いまの言語）。選べる言語：[対応言語] ## レイアウト - 横1段。左・中央・右に振り分ける。高さ 64px - スマホ：縦に3段（言語の切り替え → リンク → コピーライト）、中央揃え ## デザイン - 背景 #FFFFFF、上端に 1px solid #E2E8F0 - コピーライト：12px、色 #5F6D84 - リンク：13px、色 #5F6D84、項目の間隔 24px。hover で色 #1463F0 - 言語の切り替え：標準の select 要素を使い、見た目を整える。高さ 36px、左に地球のアイコン（16px）、枠線 1px solid #DCE4F0、角丸 999px、文字 13px、右に下向きの山形 ## 動作 - 言語を選ぶと、いま見ているページの、その言語版へ移動する - 選んだ言語を保存し、次に訪れたときも同じ言語で表示する（保存の方法はコメントで説明する） - 言語名は、その言語で書く（English、简体中文） - JavaScript が無効な場合に備えて、select の代わりにリンクの一覧を表示する方法も併記する ## アクセシビリティ - select には label（視覚的に隠してよい。「言語を選ぶ / Language」）を付ける - 各 option に lang 属性を付ける - 選んだだけですぐ移動すると、キーボードで選びにくいことがある。「変更」ボタンを押して移動する方式も併記する - footer 要素を使う ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。