春休みに初めてのWebサイトを作ろう！1週間チャレンジ

はじめに

春休みの1週間を使って、初めてのWebサイトを作ってみませんか？この記事では、7日間のステップバイステップで自己紹介サイトを完成させる方法を、コード例付きで紹介します。

プログラミング未経験でも大丈夫。1日1〜2時間で進められます。

Day 1：環境準備

VS Codeをインストールし、最初のHTMLファイルを作ります。

1. VS Codeをダウンロード・インストール
2. 日本語化（Japanese Language Pack）
3. デスクトップに my-site フォルダを作成
4. VS Codeでフォルダを開き、index.html を作成

📖 VS Codeのインストール方法

Day 2：HTMLの基本

見出し・段落・リスト・リンクのタグを学びます。以下のコードを書いてみましょう。

<h1>【名前】のページ</h1>
<p>こんにちは！【学年】の【名前】です。</p>
<h2>好きなもの</h2>
<ul>
  <li>【好きなもの1】</li>
  <li>【好きなもの2】</li>
  <li>【好きなもの3】</li>
</ul>
<h2>リンク集</h2>
<a href="https://example.com">お気に入りサイト</a>

【名前】や【好きなもの】は自分の情報に書き換えてください。

📖 HTMLで初めてのWebページを作る方法

Day 3：CSSの基本

style.css を作成し、色・フォント・余白を変えてページをデザインします。

body {
  font-family: sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fafaf9;
  color: #333;
}
h1 { color: #0f766e; }
h2 { color: #0f766e; border-left: 4px solid #0f766e; padding-left: 8px; }
a { color: #0f766e; }
ul { list-style: none; padding: 0; }
li { padding: 4px 0; }
li::before { content: "✅ "; }

ポイント：max-width と margin: 0 auto でページを中央に配置します。

📖 CSSでスタイルを付ける方法

Day 4：レイアウト

Flexboxで要素を横並びにし、カードレイアウトを作ります。

.container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.card {
  flex: 1;
  min-width: 200px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

好きなものをカード形式で並べると、見た目がぐっと良くなります。

🔗 あわせてFlexbox入門もチェックしてみましょう。

Day 5：レスポンシブ対応

メディアクエリでスマホでも見やすいデザインにします。

@media (max-width: 600px) {
  .container { flex-direction: column; }
  .card { min-width: auto; }
}

画面幅が600px以下のとき、カードが縦並びになります。

📖 レスポンシブデザインの作り方

Day 6：仕上げ

細かいデザインを調整し、コンテンツを充実させます。

• 写真を追加する（画像の表示方法）
• フッターに著作権表示を追加する
• リンクのホバーエフェクトを追加する
• 全体の余白やフォントサイズを微調整する

Day 7：公開

GitHub Pagesで世界に公開します。

1. GitHubアカウントを作成
2. リポジトリを作成
3. ファイルをアップロード
4. Settings → Pages で公開を有効化

📖 GitHub Pagesで公開する方法

完成後のアレンジアイデア

• JavaScriptでダークモード切り替えを追加
• アニメーションで要素をフェードインさせる
• お問い合わせフォームを追加
• ブログページを追加して日記を書く

最初のプロジェクトを成功させるコツ

春から始めるWeb制作の最初のプロジェクトを成功させるためのコツを紹介します。

コツ1：小さく始める

最初から大きなサイトを作ろうとすると、途中で挫折しやすいです。まずは1ページだけの自己紹介サイトから始めましょう。名前、好きなもの、写真を載せるだけで十分です。1ページが完成したら、2ページ目、3ページ目と増やしていきます。

コツ2：完成の基準を決める

「いつまでに何を作るか」を最初に決めましょう。たとえば「2週間で自己紹介ページを完成させる」という目標です。期限がないと、いつまでも「もう少し直したい」と終わりが見えなくなります。

コツ3：毎日少しずつ進める

1日に何時間もやる必要はありません。15分〜30分でも、毎日続けることが大切です。「今日はh1タグを書く」「明日はCSSで色をつける」のように、小さなタスクに分けると取り組みやすくなります。

コツ4：わからないことはすぐ調べる

コードを書いていて「これどうやるんだろう？」と思ったら、すぐに検索しましょう。「HTML 画像 入れ方」のように、やりたいことをそのまま検索すれば、答えが見つかります。

コツ5：完成したら誰かに見せる

作ったページは友達や家族に見せましょう。「すごいね！」と言ってもらえると、次も頑張ろうという気持ちになります。改善点を教えてもらえることもあります。

春に始めるメリット

春はプログラミングを始めるのに最適な季節です。

新学期のフレッシュな気持ちで、新しいことに挑戦しやすい時期です。夏休みまでに基礎を固めておけば、夏休みに本格的な作品を作れます。

また、4月から情報の授業が始まる学校も多いです。授業で習う前に自分で学んでおけば、授業の内容がすんなり理解できます。「もう知ってる！」という状態で授業を受けると、余裕を持って取り組めます。

春に始めて夏に作品を作り、秋の文化祭で発表する。このサイクルを作れると、1年間を通してプログラミングスキルが着実に伸びていきます。

最初の一歩は「テキストエディタを開いてHTMLファイルを作る」ことです。今日できる小さな一歩から始めてみましょう。完璧でなくていいので、まず手を動かすことが大切です。

最初のプロジェクトにおすすめのテーマ

何を作ればいいか迷っている人のために、おすすめのテーマを紹介します。

• 自己紹介ページ：名前、趣味、好きな食べ物を載せる。一番シンプルで、最初のプロジェクトに最適です。
• 好きなものランキング：好きなゲーム、音楽、映画のトップ5を紹介するページ。リストタグの練習になります。
• ペット紹介ページ：ペットの写真と名前、性格を載せるページ。画像の表示方法を学べます。
• 時間割ページ：自分のクラスの時間割をテーブルで作るページ。表の作り方を練習できます。

どのテーマも、HTMLの基本タグだけで作れます。CSSで色や余白を加えれば、見た目もきれいに仕上がります。「自分が見て楽しいもの」を作ると、モチベーションが続きやすいです。友達に「これ見て！」と言いたくなるようなページを目指しましょう。

まとめ