「Webエンジニアを目指しているけど、ポートフォリオってどう作ればいいの？」
「HTMLとCSSしか分からないけど大丈夫？」

そんな疑問を持つ人は多いでしょう。

結論から言うと、HTMLとCSSだけでも立派なポートフォリオを作ることができます。
重要なのは「何を作るか」よりも「どう見せるか・どうまとめるか」です。

この記事では、現役エンジニアが初心者に教えている
“HTML/CSSだけで完成するポートフォリオ作成の全ステップ” を詳しく解説します。

🧭 第1章｜ポートフォリオとは？目的を正しく理解しよう

ポートフォリオとは、自分のスキルを「見える形」で伝える作品集です。
ただし、デザインや完成度よりも “学習過程と成長” が重視されます。

💬 採用担当が見ているポイント

項目内容
コードの理解度正しい構文・コメントが書けているか
デザイン力見やすく整理されているか
思考力どんな意図で作ったか説明できるか
継続力学習履歴や更新が続いているか

💡 つまり「完成度100%」よりも「自分の学びを整理して見せること」が大事です。

🧩 第2章｜HTML/CSSポートフォリオのテーマを決めよう

まず最初に、「何を作るか」を決めましょう。

🎯 初心者におすすめのテーマ5選

テーマ特徴
自己紹介ページ基本構成・プロフィールが伝わる
ブログ風サイトコンテンツ構成を学べる
商品紹介ページデザインスキルを見せやすい
企業風サイトレイアウトやナビゲーション練習に最適
シンプルなLP（ランディングページ）実務的なデザイン練習に◎

💡 おすすめは「自己紹介＋作品紹介サイト」。
自分の学習記録と成果物を1ページにまとめると実用的です。

🧱 第3章｜HTMLでページの骨組みを作る

HTMLはポートフォリオの“設計図”。
まずは、以下のような構成でページを組み立てましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Portfolio</h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#works">Works</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>私はWeb制作を学習中の〇〇です。HTMLとCSSを中心に勉強しています。</p>
    </section>

    <section id="works">
      <h2>My Works</h2>
      <div class="work">
        <img src="work1.png" alt="作品1">
        <p>自己紹介ページの模写練習を行いました。</p>
      </div>
      <div class="work">
        <img src="work2.png" alt="作品2">
        <p>企業サイトのトップページデザインを練習しました。</p>
      </div>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>お問い合わせは <a href="mailto:yourmail@example.com">こちら</a> まで。</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 My Portfolio</p>
  </footer>
</body>
</html>

これだけで、シンプルな1ページポートフォリオの土台が完成します。

🎨 第4章｜CSSでデザインを整える

次に、CSSで全体の雰囲気を整えましょう。
デザイン初心者でも見栄えが良くなるコツは「3色以内でまとめる」ことです。

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  background-color: #f9f9f9;
  line-height: 1.6;
}

header {
  background: #2c3e50;
  color: #fff;
  padding: 20px;
  text-align: center;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

section {
  margin: 50px auto;
  width: 80%;
  max-width: 800px;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.work {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.work img {
  width: 150px;
  border-radius: 10px;
}

💡 ポイント：

  • 背景を淡い色にして、要素を白で浮かせると“今風”デザインになる。
  • 文字は「黒100%」ではなく、#333など少しグレー寄りが読みやすい。
  • box-shadowとborder-radiusで“やわらかさ”を演出。

📱 第5章｜スマホ対応（レスポンシブデザイン）

採用担当者はスマホでポートフォリオを見ることも多いため、
レスポンシブ対応は必須です。

@media screen and (max-width: 768px) {
  .work {
    flex-direction: column;
    text-align: center;
  }

  nav ul {
    flex-direction: column;
  }
}

💡 これでスマホ画面でもレイアウトが崩れずに表示されます。

🔍 第6章｜ポートフォリオの見せ方を工夫しよう

ただ作るだけではなく、「伝わる構成」 にすることが重要です。

🌱 構成のコツ

  1. 自己紹介：どんな目的で学習しているか
  2. 制作物紹介：スクリーンショット＋説明文
  3. 使用技術：HTML、CSS、Flexbox、レスポンシブ対応など
  4. 学んだこと：改善点・気づき
  5. 連絡先：メールやSNSへのリンク

💡 採用担当が「この人、ちゃんと理解してるな」と感じるのは、
コードよりも“自分の成長を言語化できている”人です。

🧠 第7章｜初心者がよくやるNGパターン

NG例問題点
テンプレートをコピペして終わり学習成果が伝わらない
デザインに凝りすぎる本質（構造理解）からズレる
作品数を増やしすぎる一つ一つの完成度が下がる
更新が止まっている継続力の印象が悪い

✅ 最初は「1作品を丁寧に作る」でOK。
クオリティ重視の方が評価されます。

🧾 第8章｜完成チェックリスト

チェック項目状況
HTMLの基本構造が理解できている□
CSSで余白・配色・文字サイズを調整できる□
スマホでも崩れずに見える□
自分の学びや工夫を説明できる□
公開URLを共有できる（GitHub Pagesなど）□

5つすべてチェックできたら、あなたのポートフォリオは“見せられるレベル”です。

🚀 第9章｜公開までの手順（GitHub Pagesで無料公開）

  1. GitHubに登録
  2. 新しいリポジトリを作成
  3. index.htmlとstyle.cssをアップロード
  4. 「Settings」→「Pages」→「main branch」を選択
  5. 数分後、URLが発行される

💡 例：
https://yourname.github.io/portfolio/

これで、誰でもアクセスできる“公開ポートフォリオ”が完成です！

🧭 第10章｜まとめ：ポートフォリオは“完成より継続”が大事

HTMLとCSSだけでも、
「自分の成長を見せるポートフォリオ」 は十分に作れます。

  • 完璧を目指すより、まず1つ公開する
  • 手直しを重ねることで成長が見える
  • “作り続ける姿勢”が最強のアピールになる

💬 「この人は学びながら手を動かしている」
─ 採用担当が求めているのは、まさにその姿です。

Follow me!

PV数: 13