簡単なWebページを作る（後編）
中級CSSでデザインを整えて2ページ目を追加し、スマホ対応まで仕上げます。
座学
この講座で学べること
- ✓CSSでデザインを改善するための具体的な指示の出し方を習得する
- ✓複数ページのウェブサイトをリンクでつなぐ方法を理解する
- ✓「レスポンシブデザイン」の概念とClaude Codeへの依頼方法を知る
- ✓気になる点を何度でも修正依頼するサイクルを体験する
前編で作った自己紹介ページをさらに改善していきます。CSSでデザインを整えるには「何が気に入らないか」を具体的に伝えることがコツです。「もっとおしゃれにして」という曖昧な指示では方向性が伝わりません。「背景色を薄いブルーにして、文字サイズを16px、行間を1.8倍、見出しを太字にしてください」のように色・サイズ・余白を数値で伝えるほど、思い通りの結果が得られます。
複数ページのウェブサイトを作るには、ページ間を「リンク」でつなぎます。index.html（トップページ）からhobby.html（趣味詳細ページ）へのリンクを張ると、クリックで移動できるサイトになります。Claude Codeに「hobby.htmlページを追加して、index.htmlからリンクを張ってください」と伝えるだけで実現できます。リンクを張った後は必ずブラウザで実際にクリックして移動できるか確認しましょう。
「レスポンシブデザイン」とは、スマートフォン・タブレット・パソコンなど画面サイズに合わせて自動でレイアウトが変わる仕組みのことです。現在はスマートフォンからのアクセスが多いため、レスポンシブ対応は必須といえます。「スマートフォンでも見やすいようにレスポンシブデザインにしてください」と伝えるだけで、Claude Codeが対応したCSSを書いてくれます。
ブラウザの開発者ツール（F12キー）を使うとスマートフォン表示をパソコン上でシミュレートできます。Ctrl+Shift+M（Mac: Cmd+Shift+M）でモバイルビューに切り替え、iPhone・Androidなど様々な画面サイズで確認できます。Claude Codeで作ったページも開発者ツールで確認しながら「スマホ表示でテキストが小さすぎる、修正して」と追加の修正を依頼できます。
複数ページのリンク構造
index.html
トップページ
（自己紹介）
趣味のページへ
hobby.html
趣味詳細ページ
トップへ戻る
ページ間を <a href="..."> タグでつなぐと複数ページのサイトになります
レスポンシブデザインのビフォーアフター
❌ Before（スマホ非対応）
はみ出る
文字が小さすぎて読みにくい
✅ After（レスポンシブ対応）
画面幅に合わせて自動調整
「スマートフォンでも見やすくしてください」とClaude Codeに伝えるだけでOK
実践手順
ステップ1：デザインを改善してもらう
前編で作ったページのデザインを改善してもらいましょう。以下の指示をそのまま使っても、自分なりに変えてもOKです。
index.htmlのデザインを改善してください。
背景色を薄いブルーにして、
文字を読みやすいサイズにして、
全体的におしゃれにしてくださいステップ2：2ページ目を追加してもらう
趣味の詳細を紹介するページを追加してもらいましょう。
趣味の詳細ページ（hobby.html）を作って
index.htmlからリンクを張ってください。
hobby.htmlからもindex.htmlに戻れるようにしてくださいステップ3：スマホでも見やすくしてもらう
スマートフォンでも見やすいように対応してもらいましょう。
スマートフォンでも見やすいように
レスポンシブデザインにしてくださいステップ4：完成したページをブラウザで確認する
index.htmlをブラウザで開いて確認しましょう。リンクをクリックしてhobby.htmlに移動できるか、ブラウザの開発者ツール（F12キー）でスマホ表示をシミュレートして確認してみてください。
確認チェック
講座を終える前に、以下の項目を確認しましょう。
よくある質問
Q. レスポンシブ対応したのにスマホで見るとまだ崩れています
A. HTMLの `<head>` 内に `<meta name='viewport' content='width=device-width, initial-scale=1.0'>` が入っているか確認してください。この1行がないとスマートフォンでレスポンシブが機能しません。Claude Codeに「viewportメタタグが入っているか確認して、なければ追加してください」と伝えると対処してくれます。
Q. 2ページ目へのリンクをクリックしても移動しません
A. リンク先のファイル名と実際のファイル名が一致しているか確認してください。大文字・小文字の違いや拡張子の有無でリンクが機能しないことがあります。Claude Codeに「index.htmlのリンクが正しく動くか確認して修正してください」と依頼すると原因を調べて直してくれます。
Q. デザインの変更を何度も依頼しているうちにCSSが複雑になってきました
A. 長い修正の繰り返しでCSSに不要なスタイルが積み重なることがあります。「style.cssを読んで、重複しているスタイルや不要なものを削除して整理してください」とClaude Codeに頼むと、CSSを最適化してくれます。