2026年4月16日
ポートフォリオとは？中学生でも作れる？
ポートフォリオとは、自分の作品や実績をまとめたページのことです。プログラミングを学んでいる中学生・高校生が作ると、次のような場面で役立ちます。
- 高校・大学の推薦入試や面接でアピールできる
- プログラミングコンテストへの応募に使える
- 「自分がどれだけ学んだか」を振り返れる
- 将来の就職活動・フリーランス活動の基盤になる
この記事では、HTMLとCSSを使ったポートフォリオの作り方を、中学生・高校生向けにわかりやすく解説します。
ポートフォリオに載せる内容
ポートフォリオには、次の内容を載せるのがおすすめです。
① 自己紹介
名前・学年・プログラミングを始めたきっかけ・得意な技術など。
② スキル一覧
学んだ言語・ツール（HTML・CSS・JavaScriptなど）を一覧で示す。
③ 制作物（作品）
作ったウェブページ・アプリのスクリーンショットと説明。GitHubのリンクがあるとさらに良い。
④ 連絡先
メールアドレスやSNSのリンク（保護者と相談して掲載を決めること）。
ポートフォリオの基本構造を作ろう
HTMLとCSSでポートフォリオの骨格を作ります。まずは全体の構造から始めましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【名前】のポートフォリオ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ナビゲーション -->
<nav>
<a href="#about">自己紹介</a>
<a href="#skills">スキル</a>
<a href="#works">制作物</a>
</nav>
<!-- ヒーローセクション -->
<section id="hero">
<h1>【名前】のポートフォリオ</h1>
<p>プログラミングを学んでいる中学生です。</p>
</section>
<!-- 自己紹介 -->
<section id="about">
<h2>自己紹介</h2>
<p>HTMLとCSSを学び始めて3ヶ月です。ウェブサイトを作るのが好きです。</p>
</section>
<!-- スキル -->
<section id="skills">
<h2>スキル</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript（学習中）</li>
</ul>
</section>
<!-- 制作物 -->
<section id="works">
<h2>制作物</h2>
<div class="card">
<h3>自己紹介ページ</h3>
<p>HTMLとCSSで作った最初のウェブページです。</p>
</div>
</section>
</body>
</html>▶ プレビュー
🔥 Webアクセシビリティとはで実践してみましょう。
CSSでデザインを整えよう
/* 全体のリセットと基本設定 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: sans-serif;
color: #333;
line-height: 1.7;
}
/* ナビゲーション */
nav {
display: flex;
gap: 24px;
padding: 16px 32px;
background-color: #0d9488;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
/* セクション共通 */
section {
max-width: 800px;
margin: 0 auto;
padding: 64px 24px;
}
h2 {
font-size: 1.8rem;
color: #0d9488;
margin-bottom: 24px;
}
/* ヒーロー */
#hero {
text-align: center;
background-color: #f0f9ff;
max-width: 100%;
padding: 80px 24px;
}
#hero h1 { font-size: 2.5rem; color: #0d9488; }
/* 制作物カード */
.card {
background-color: #f9fafb;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
}💡 GitHub Pagesで公開で基礎を確認できます。
ポートフォリオを公開する方法
作ったポートフォリオをインターネットに公開するには、GitHub Pages を使うのがおすすめです。無料で使えます。
- GitHub（ギットハブ）のアカウントを作る（無料）
- 新しいリポジトリを作り、HTMLファイルをアップロードする
- Settings → Pages から公開設定をする
ユーザー名.github.io/リポジトリ名のURLでアクセスできる
💡 GitHub（ギットハブ）とは？
プログラムのコードを保存・管理・公開できるサービスです。世界中のエンジニアが使っており、無料で利用できます。ポートフォリオの公開だけでなく、コードの管理にも役立ちます。
公開手順は「GitHub Pagesでウェブサイトを公開する方法」で詳しく解説しています。
🔗 あわせて学習ロードマップもチェックしてみましょう。
ポートフォリオサイトのデザインのコツ
ポートフォリオサイトは「自分を紹介するためのサイト」です。見やすく、わかりやすいデザインを心がけましょう。
コツ1：シンプルにする
装飾を盛り込みすぎると、肝心の作品が目立たなくなります。背景は白か薄い色にして、作品のスクリーンショットが映えるようにしましょう。色は3色以内に抑えるのがおすすめです。
コツ2：作品を大きく見せる
作品のスクリーンショットは大きめに表示しましょう。小さいと何を作ったのかわかりません。クリックすると実際に動くページに飛べるようにしておくと、さらに印象が良くなります。
コツ3：スマホでも見やすくする
面接官や先生がスマホでポートフォリオを見ることもあります。レスポンシブデザインで、スマホでも崩れないレイアウトにしておきましょう。
コツ4：読み込み速度を意識する
画像が重すぎるとページの表示が遅くなります。スクリーンショットは適切なサイズに圧縮してからアップロードしましょう。表示が遅いと、見る人が離脱してしまいます。
ポートフォリオサイトの構成についてもっと詳しく知りたい人は「プログラミング学習の成果をポートフォリオにまとめる方法」を読んでみてください。載せるべき内容や更新のコツを解説しています。
ポートフォリオを公開するタイミング
「まだ作品が少ないから公開するのは早い」と思うかもしれません。でも、早めに公開するのがおすすめです。理由は3つあります。
1つ目：公開することで完成度が上がる。「人に見られる」と思うと、細かい部分まで気を配るようになります。非公開のまま作るよりも、質の高い作品になります。
2つ目：フィードバックがもらえる。公開すれば、友達や先生に見てもらえます。「ここがわかりにくい」「この作品が面白い」などの意見は、改善のヒントになります。
3つ目：成長の記録になる。最初の作品がシンプルでも、あとから振り返ると「こんなに成長したんだ」と実感できます。恥ずかしがらずに、今の実力で公開しましょう。
作品が1つでもあれば、ポートフォリオとして公開する価値があります。完璧を目指すよりも、まず公開して、少しずつ改善していくのが正しいアプローチです。
ポートフォリオサイトを作ったら、URLを名刺やSNSのプロフィールに載せておきましょう。いつでも誰かに見せられる状態にしておくことが大切です。
また、定期的にリンク切れがないか確認する習慣をつけましょう。作品のURLが変わったのにポートフォリオのリンクを更新していないと、クリックしてもエラーページが表示されてしまいます。月に1回、すべてのリンクをクリックして確認するだけで十分です。
ポートフォリオは「作って終わり」ではなく「育てていくもの」です。新しい作品ができたら追加し、古い作品の説明文を改善し、デザインを少しずつ磨いていきましょう。
まとめ
- ✅ ポートフォリオ：自分の作品・スキルをまとめたウェブページ
- ✅ 載せる内容：自己紹介・スキル一覧・制作物・連絡先
- ✅ HTMLで構造を作り、CSSでデザインを整える
- ✅
viewportメタタグでスマホ対応にする - ✅ GitHub Pages を使えば無料でインターネットに公開できる
まずは小さくてもいいので、自己紹介ページから作り始めましょう。レッスンでHTMLとCSSの基礎を学んでから挑戦するのがおすすめです。
あわせて読みたい記事
- プログラミングポートフォリオの作り方 — ポートフォリオに載せる作品の選び方と見せ方