Chapter 4: 実践演習：ミニWebサイト制作

これまでの章で、Webサイト制作の3つの基本要素であるHTML、CSS、JavaScriptを学びました。理論だけでなく、実際に手を動かすことで理解はぐっと深まります。この章では、学んだ知識をすべて使って、一つのミニWebサイトを完成させる実践的な演習に取り組みましょう。

最終的なゴールは、簡単なポートフォリオサイトや、自己紹介ページ、または特定のテーマを持つ情報サイトなどをゼロから作り上げることです。

ステップ1: 企画を立てる

まずは、どんなWebサイトを作るかアイデアを練ります。

• テーマを決めよう: 好きな趣味（写真、料理、旅行など）や、得意なこと（イラスト、プログラミング）をテーマにするとモチベーションが維持しやすいです。

• ページの構成を考える: どのようなコンテンツを配置するか、簡単なラフスケッチを作成してみましょう。

  • ヘッダー: サイトのタイトルやナビゲーションメニュー

  • メインコンテンツ: サイトの中心となる情報

  • フッター: 著作権情報や連絡先など

• 必要な要素をリストアップ:

  • HTML: 見出し、段落、画像、リンク、リスト、フォームなど

  • CSS: フォント、色、レイアウト（Flexbox/Grid）、レスポンシブデザイン

  • JavaScript: ボタンクリック時のイベント、フォームの入力値取得など

ステップ2: HTMLで骨組みを作る

企画書をもとに、まずはHTMLファイルを作成します。この段階では、見た目は気にせず、ページのコンテンツと構造を正しくマークアップすることに集中します。

セマンティックHTMLを意識して、適切なタグを選びましょう。<h1>から<h6>でページの階層構造を作り、<p>で段落を、<ul>や<ol>でリストを記述します。画像やリンクも忘れずに配置してください。

ステップ3: CSSでデザインする

HTMLで作成した骨組みに、CSSでスタイルを加えていきます。

• レイアウトを整える: FlexboxやCSS Gridを使って、ヘッダー、メイン、フッターを配置します。コンテンツの並び方も調整しましょう。

• 色とフォントを選ぶ: サイトのテーマに合った配色を決め、フォントの種類やサイズを調整して、読みやすいデザインにします。

• レスポンシブ対応: @mediaルールを使って、スマートフォンやタブレットでの見え方を調整します。コンテンツがはみ出したり、表示が崩れたりしないように注意しましょう。

ステップ4: JavaScriptで動きをつける

最後に、JavaScriptでインタラクティブな要素を追加します。

• イベントハンドラを設定する: ユーザーがボタンをクリックしたり、マウスを重ねたりしたときに、何らかのアクションが起こるようにします。

• DOM操作: クリックしたボタンの色が変わる、特定のテキストが表示される、といった機能を実装してみましょう。

• フォームの検証: もしフォームを設置するなら、入力値が正しいか（例：メールアドレスの形式など）をチェックする機能を加えると、より実践的です。

成果物の見直しと改善

Webサイトが完成したら、ブラウザで動作確認をしてみましょう。

• 表示の確認: 各デバイス（PC、スマートフォンなど）でレイアウトが崩れていないか確認します。

• 機能の確認: ボタンやリンクが意図した通りに動作するかチェックします。

• コードの整理: 不要なコメントを削除したり、インデントを整えたりして、読みやすいコードに改善します。

この実践演習を通して、あなたはHTML、CSS、JavaScriptの知識が有機的に結びついていることを実感できるでしょう。次の章では、検定試験に向けた最終チェックリストと、今後の学習ステップについて解説します。