簡単なWebページを作る（後編）
中級CSSでデザインを整えて2ページ目を追加し、スマホ対応まで仕上げます。
座学
この講座で学べること
- ✓CSSでデザインを改善するための具体的な指示の出し方を習得する
- ✓複数ページのウェブサイトをリンクでつなぐ方法を理解する
- ✓「レスポンシブデザイン」の概念とClaude Codeへの依頼方法を知る
- ✓気になる点を何度でも修正依頼するサイクルを体験する
前編で作った自己紹介ページをさらに改善していきます。CSSを使ってデザインを整えるには、「何が気に入らないか」を具体的に伝えることがコツです。 ✗ 曖昧な指示：「もっとおしゃれにして」 ✓ 具体的な指示：「背景色を薄いブルーにして、文字を読みやすいサイズにして、全体的におしゃれにしてください」 色・サイズ・余白など「何を」「どうしたいか」を言葉にするほど、思い通りの結果が得られます。
複数ページのウェブサイトを作るには、ページ間を「リンク」でつなぎます。例えば、index.html（トップページ）からhobby.html（趣味詳細ページ）へのリンクを張ると、クリックで移動できるサイトになります。Claude Codeに「〇〇ページを追加して、リンクを張ってください」と伝えるだけで実現できます。
「レスポンシブデザイン」とは、画面の大きさに合わせて自動でレイアウトが変わる仕組みのことです。パソコンでも、スマートフォンでも見やすく表示されます。「スマートフォンでも見やすいようにレスポンシブデザインにしてください」と伝えるだけで、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キー）でスマホ表示をシミュレートして確認してみてください。
確認チェック
講座を終える前に、以下の項目を確認しましょう。