長期休みの自由課題にHTMLでポートフォリオを作ろう

はじめに

長期休みの自由課題、何を作ろうか迷っていませんか？HTMLとCSSでポートフォリオサイトを作れば、プログラミングの勉強にもなり、自分の作品集としても使えます。

ポートフォリオ（portfolio）とは、自分の作品や実績をまとめたページのことです。この記事では、具体的なコード例付きでポートフォリオの作り方を解説します。

ポートフォリオの構成

ポートフォリオサイトは以下の4つのセクションで構成します。

1. ヘッダー — 名前・肩書き・ナビゲーション
2. 自己紹介 — 自分について
3. 作品一覧 — これまでに作ったもの
4. スキル・フッター — 学んだ技術・著作権表示

ステップ1：ヘッダーを作る

<header>
  <h1>田中 太郎のポートフォリオ</h1>
  <p>中学2年生 / プログラミング好き</p>
  <nav>
    <a href="#about">自己紹介</a>
    <a href="#works">作品</a>
    <a href="#skills">スキル</a>
  </nav>
</header>

<nav> タグでページ内リンクを作ります。href="#about" は同じページ内の id="about" の場所にジャンプします。

ステップ2：自己紹介セクション

<section id="about">
  <h2>自己紹介</h2>
  <p>はじめまして！中学2年生の田中太郎です。</p>
  <p>HTMLとCSSを学び始めて3ヶ月。
     自分のWebサイトを作るのが楽しくて毎日コードを書いています。</p>
</section>

自分の名前・学年・プログラミングを始めたきっかけなどを書きましょう。

📖 詳しくはポートフォリオの作り方で解説しています。

ステップ3：作品一覧セクション

<section id="works">
  <h2>作品一覧</h2>
  <div class="works-grid">
    <div class="work-card">
      <h3>自己紹介ページ</h3>
      <p>HTMLとCSSで作った最初の作品</p>
      <a href="#">見てみる →</a>
    </div>
    <div class="work-card">
      <h3>おみくじアプリ</h3>
      <p>JavaScriptで作ったミニゲーム</p>
      <a href="#">見てみる →</a>
    </div>
  </div>
</section>

Flexboxで作品カードを横並びにします。各カードに作品名・説明・リンクを載せましょう。

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

ステップ4：CSSでデザインする

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; color: #333; line-height: 1.8; }
header { background: #0f766e; color: #fff; padding: 40px 20px; text-align: center; }
header nav a { color: #fff; margin: 0 10px; }
section { max-width: 800px; margin: 40px auto; padding: 0 20px; }
.works-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.work-card { flex: 1; min-width: 200px; border: 1px solid #ddd; border-radius: 8px; padding: 20px; }
.skills-list { display: flex; gap: 10px; flex-wrap: wrap; }
.skill-tag { background: #f0fdfa; color: #0f766e; padding: 4px 12px; border-radius: 20px; font-size: 14px; }

ポイント：

• box-sizing: border-box で幅の計算を簡単にする
• ヘッダーに背景色をつけて目立たせる
• Flexboxで作品カードを横並びにする
• スキルタグはバッジ風のデザインにする

ステップ5：スキル・フッターを追加

<section id="skills">
  <h2>スキル</h2>
  <div class="skills-list">
    <span class="skill-tag">HTML</span>
    <span class="skill-tag">CSS</span>
    <span class="skill-tag">JavaScript</span>
  </div>
</section>
<footer>
  <p>&copy; 2026 田中太郎</p>
</footer>

デザインのポイント

• 色は3色以内 — メインカラー・サブカラー・背景色
• 余白をしっかり取る — marginとpaddingの違いを参考に
• スマホ対応 — レスポンシブデザインで画面幅に合わせる
• フォントは読みやすく — sans-serif系がおすすめ

公開しよう

完成したらGitHub Pagesで公開しましょう。URLを先生や友達に共有できます。

👉 GitHub Pagesで公開する方法も参考にしてください。

冬休みにポートフォリオを作る具体的なスケジュール

冬休みの約2週間でポートフォリオを完成させるスケジュールを紹介します。

1〜3日目：設計と準備

どんなページにするか紙に書き出します。載せる内容（自己紹介、スキル、作品）を決めて、ページの構成をラフスケッチしましょう。参考にしたいサイトを3つほど見つけておくと、デザインのイメージが固まります。

4〜6日目：HTMLで構造を作る

設計をもとに、HTMLでページの骨組みを作ります。見出し、段落、リスト、リンクなどのタグを使って、内容を配置していきます。この段階では見た目は気にしなくて大丈夫です。

7〜9日目：CSSでデザインを整える

背景色、文字の色、余白、フォントサイズなどをCSSで設定します。スマホでも見やすいように、max-widthを設定してコンテンツの幅を制限しましょう。

10〜12日目：作品を追加する

これまでに作った作品のスクリーンショットと説明を追加します。作品がまだない人は、このポートフォリオ自体が最初の作品になります。

13〜14日目：公開と確認

GitHub Pagesで公開します。スマホとパソコンの両方で表示を確認し、リンク切れや誤字がないかチェックしましょう。友達や家族に見てもらってフィードバックをもらいます。

ポートフォリオに書く自己紹介のコツ

自己紹介は短くても大丈夫です。次の内容を含めましょう。

• 名前（ニックネームでもOK）
• 学年
• プログラミングを始めたきっかけ
• 興味のある分野（ウェブ、ゲーム、アプリなど）
• 目標（「ウェブサイトを作れるようになりたい」など）

堅苦しく書く必要はありません。自分の言葉で、自然に書きましょう。「プログラミングが好きです」「まだ始めたばかりですが頑張っています」のような素直な文章で十分です。

冬休みに作るポートフォリオのデザインアイデア

デザインに迷ったら、次のアイデアを参考にしてください。

アイデア1：シンプルな1カラムレイアウト

上から順に自己紹介、スキル、作品を並べるシンプルなデザインです。初心者でも作りやすく、スマホでも見やすいです。

アイデア2：カード風デザイン

各セクションをカード（白い背景に影をつけた四角形）で囲むデザインです。border-radiusで角を丸くし、box-shadowで影をつけると、モダンな印象になります。

アイデア3：ダークモード風

背景を暗い色（#1a1a2e など）にして、文字を明るい色にするデザインです。プログラマーっぽい雰囲気が出ます。アクセントカラーに明るい青や緑を使うと映えます。

どのデザインでも、文字が読みやすいことが一番大切です。背景と文字のコントラストを十分に確保しましょう。

冬休みが終わったあとも、新しい作品ができたら追加していきましょう。3学期の間に1〜2個作品を追加できれば、春には立派なポートフォリオになっています。

ポートフォリオのURLは、SNSのプロフィールや自己紹介に載せておきましょう。いつでも誰かに見せられる状態にしておくことが大切です。

冬休みにポートフォリオを作った経験は、情報の授業でも活きてきます。HTMLやCSSの基本を実践で学んでいるので、授業の内容がすんなり理解できるはずです。「もう自分でサイトを作ったことがある」という自信は、その後の学習を大きく後押ししてくれます。まずは今日、テキストエディタを開くところから始めてみてください。一歩踏み出せば、あとは楽しくなります。

まとめ