🙋 HTML・CSSで自己紹介ページを作ろう【第一回】構成を考える・HTMLで骨組みを作る

Posted at 2026-08-31

1. 👋 はじめに

これまでのシリーズでHTML・CSSの基礎をしっかり学んできました。

今回からは 実践編 です！
学んだ知識を使って、実際に 自己紹介ページ を完成させましょう🎉

このシリーズのゴール：
HTML・CSSだけで、レスポンシブ対応した自分だけの自己紹介ページを完成させ、インターネットに公開すること！

この記事を読めば：

✅ ページ構成を考える方法がわかる
✅ セマンティックHTMLで骨組みを作れる
✅ アクセシビリティを意識した実装ができる

2. 🎯 完成イメージを決めよう

いきなりコードを書かない！

良いWebページ制作の第一歩は「何を作るか」を決めることです。
いきなりHTMLを書き始めると、途中で「あれ、何を作ろうとしてたんだっけ？」となりがちです。

今回作るページの構成を決める

【自己紹介ページに含める要素】

① ヘッダー
   - 名前
   - キャッチコピー（一言で自分を表す言葉）
   - ナビゲーション（各セクションへのリンク）

② 自己紹介セクション
   - プロフィール写真（またはイラスト）
   - 自己紹介文
   - SNSリンク

③ スキル一覧セクション
   - 得意な技術・言語
   - レベル感（初級・中級など）

④ 経歴・実績セクション
   - 経歴（学歴・職歴）
   - 実績（作った物・受賞歴など）

⑤ お問い合わせセクション
   - 連絡先（メール・SNS）
   - お問い合わせフォーム（任意）

⑥ フッター
   - コピーライト
   - SNSリンク（再掲）

ワイヤーフレームを考える

ワイヤーフレームとは「ページの大まかな配置を決めた設計図」です。
デザインツールを使わなくても、手書きやテキストで十分です！

┌─────────────────────────────────────┐
│  [名前]              [About][Skill] │ ← ヘッダー
│                     [Works][Contact]│
├─────────────────────────────────────┤
│                                     │
│     [プロフィール写真]               │
│     こんにちは、〇〇です              │ ← 自己紹介
│     自己紹介文...                    │
│                                     │
├─────────────────────────────────────┤
│  スキル一覧                          │
│  [HTML] [CSS] [JavaScript]          │ ← スキル
│                                     │
├─────────────────────────────────────┤
│  経歴・実績                          │
│  2024年 〇〇を学習開始                │ ← 経歴
│  2025年 〇〇のプロジェクトに参加       │
│                                     │
├─────────────────────────────────────┤
│  お問い合わせ                        │
│  email@example.com                  │ ← お問い合わせ
│                                     │
├─────────────────────────────────────┤
│  © 2026 〇〇                        │ ← フッター
└─────────────────────────────────────┘

💡 紙に手書きでもOK！
完璧なデザインを作る必要はありません。
「だいたいこんな配置にしよう」という方針が決まれば十分です。

3. 🏗️ セマンティックHTMLで骨組みを作る

HTMLシリーズで学んだ知識を使おう！

第三回で学んだセマンティックタグを実際に使っていきます。
<header>・<main>・<section>・<footer> を適切に使い分けましょう。

まずは全体の骨組みから

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>田中太郎 | ポートフォリオ</title>
  <meta name="description" content="フロントエンドエンジニア田中太郎の自己紹介ページです。スキル・経歴・実績をご紹介します。" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <header>
    <!-- ヘッダーの中身は後で作る -->
  </header>

  <main>
    <section id="about">
      <!-- 自己紹介 -->
    </section>

    <section id="skills">
      <!-- スキル一覧 -->
    </section>

    <section id="works">
      <!-- 経歴・実績 -->
    </section>

    <section id="contact">
      <!-- お問い合わせ -->
    </section>
  </main>

  <footer>
    <!-- フッター -->
  </footer>

</body>
</html>

💡 id 属性を付けている理由
各セクションに id を付けておくと、ナビゲーションから
<a href="#about"> のようにアンカーリンクでジャンプできます。

4. 📝 ヘッダーを作る

<header>
  <div class="header-inner">
    <p class="logo">Taro Tanaka</p>

    <nav aria-label="メインナビゲーション">
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#works">Works</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

解説：

タグ・属性	役割
`<header>`	ページ全体のヘッダー（第三回で学んだセマンティックタグ）
`<nav aria-label="...">`	ナビゲーションであることを明示・スクリーンリーダー対応
`<a href="#about">`	同じページ内の `id="about"` へジャンプするアンカーリンク

5. 📝 自己紹介セクションを作る

<section id="about">
  <div class="about-inner">
    <img
      src="profile.jpg"
      alt="田中太郎のプロフィール写真"
      class="profile-image"
    />

    <div class="about-text">
      <h1>こんにちは、田中太郎です 👋</h1>
      <p class="catchphrase">フロントエンドエンジニア / TypeScript & React</p>
      <p>
        2024年からWeb開発を学び始め、現在はTypeScriptとReactを中心に
        フロントエンド開発をしています。
        「使う人にとって分かりやすいUI」を作ることが好きです。
      </p>

      <ul class="sns-links">
        <li>
          <a href="https://x.com/example" target="_blank" rel="noopener noreferrer">
            X（旧Twitter）
          </a>
        </li>
        <li>
          <a href="https://github.com/example" target="_blank" rel="noopener noreferrer">
            GitHub
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

💡 <h1> はページに1つだけ！
HTMLシリーズ第三回で学んだルールを思い出してください。
このページでは「自己紹介の名前」を <h1> にしています。

⚠️ target="_blank" には rel="noopener noreferrer" を忘れずに！
HTMLシリーズ第二回で学んだセキュリティのベストプラクティスです。

6. 📝 スキル一覧セクションを作る

<section id="skills">
  <h2>Skills</h2>

  <ul class="skill-list">
    <li class="skill-item">
      <p class="skill-name">HTML / CSS</p>
      <div class="skill-bar" role="img" aria-label="習熟度：上級">
        <div class="skill-bar-fill" style="width: 90%;"></div>
      </div>
    </li>

    <li class="skill-item">
      <p class="skill-name">JavaScript / TypeScript</p>
      <div class="skill-bar" role="img" aria-label="習熟度：中級">
        <div class="skill-bar-fill" style="width: 70%;"></div>
      </div>
    </li>

    <li class="skill-item">
      <p class="skill-name">React</p>
      <div class="skill-bar" role="img" aria-label="習熟度：中級">
        <div class="skill-bar-fill" style="width: 65%;"></div>
      </div>
    </li>
  </ul>
</section>

💡 なぜ <ul> を使うのか？
スキル一覧は「順序が関係ない項目の集まり」なので <ul> が適切です。
HTMLシリーズ第二回の「<ul> と <ol> の使い分け」を思い出してください。

💡 role="img" と aria-label について
スキルバーは視覚的な装飾要素なので、スクリーンリーダーには「習熟度：上級」という意味のある情報として伝えます。
HTMLシリーズ第三回で学んだWAI-ARIAの実践例です！

7. 📝 経歴・実績セクションを作る

<section id="works">
  <h2>Works & Career</h2>

  <ol class="timeline">
    <li class="timeline-item">
      <article>
        <time datetime="2024-04">2024年4月</time>
        <h3>Web開発の学習を開始</h3>
        <p>独学でHTML・CSS・JavaScriptを学び始める</p>
      </article>
    </li>

    <li class="timeline-item">
      <article>
        <time datetime="2024-10">2024年10月</time>
        <h3>初めてのポートフォリオサイトを制作</h3>
        <p>React・TypeScriptを使ったToDoアプリを開発</p>
      </article>
    </li>

    <li class="timeline-item">
      <article>
        <time datetime="2025-03">2025年3月</time>
        <h3>フリーランスとして案件を受注</h3>
        <p>企業のコーポレートサイトのフロントエンド実装を担当</p>
      </article>
    </li>
  </ol>
</section>

解説：

タグ	役割
`<ol>`	経歴は時系列という順序に意味があるため `<ul>` ではなく `<ol>` を使用
`<li>`	タイムラインの各項目（olの直接の子として必須）
`<article>`	それぞれの経歴が「単体で意味が通る独立した情報」なので使用
`<time datetime="...">`	機械が読み取れる形式で日付を表現
`<h3>`	セクション内の小見出し（h2の次の階層）

💡 なぜ <ol> なのか？
第二回で「<ul> は順序が関係ない項目・<ol> は順序が重要な手順」と学びましたね。
スキル一覧は順序を入れ替えても意味は変わりませんが、経歴は「2024年4月 → 2024年10月 → 2025年3月」という時系列の順序そのものに意味があるため、 <ol> が意味的に正しい選択です。
<ol> の子要素には <li> が必須なので、<article> は <li> の中に入れ子にします。

💡 <time> タグとは？
日付や時刻を表す専用のセマンティックタグです。
datetime 属性に機械可読な形式（YYYY-MMなど）を書き、表示テキストは人間が読みやすい形式にできます。

<!-- 表示は「2024年4月」だが、機械的には2024-04として認識される -->
<time datetime="2024-04">2024年4月</time>

8. 📝 お問い合わせセクションを作る

<section id="contact">
  <h2>Contact</h2>
  <p>お仕事のご相談・ご質問はこちらからお気軽にどうぞ。</p>

  <form action="https://formspree.io/f/your-id" method="post">
    <div class="form-group">
      <label for="name">お名前 <span aria-hidden="true">※必須</span></label>
      <input
        type="text"
        id="name"
        name="name"
        required
        placeholder="山田 太郎"
      />
    </div>

    <div class="form-group">
      <label for="email">メールアドレス <span aria-hidden="true">※必須</span></label>
      <input
        type="email"
        id="email"
        name="email"
        required
        placeholder="yamada@example.com"
      />
    </div>

    <div class="form-group">
      <label for="message">メッセージ <span aria-hidden="true">※必須</span></label>
      <textarea
        id="message"
        name="message"
        rows="5"
        required
        placeholder="お問い合わせ内容を入力してください"
      ></textarea>
    </div>

    <button type="submit">送信する</button>
  </form>
</section>

💡 フォームの送信先について
HTMLシリーズで学んだ通り、<form> は GET・POST しか使えません。
個人サイトでバックエンドを用意しなくても、 Formspree のような無料サービスを使うとフォームの送信を受け取れます。
（第三回で詳しく解説します）

💡 <label> と <input> の紐づけを忘れずに！
HTMLシリーズ第二回で学んだ通り、for 属性と id 属性を一致させています。

9. 📝 フッターを作る

<footer>
  <p>
    <a href="https://x.com/example" target="_blank" rel="noopener noreferrer">X</a>
    ・
    <a href="https://github.com/example" target="_blank" rel="noopener noreferrer">GitHub</a>
  </p>
  <p><small>&copy; 2026 Taro Tanaka. All rights reserved.</small></p>
</footer>

💡 <small> タグの意味を覚えていますか？
HTMLシリーズ第三回で学んだ通り、<small> は「免責事項・著作権表示」という意味を持つセマンティックタグです。
コピーライト表記にぴったりですね！

10. ✅ ここまでの完成コード（HTML全体）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>田中太郎 | ポートフォリオ</title>
  <meta name="description" content="フロントエンドエンジニア田中太郎の自己紹介ページです。" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <header>
    <div class="header-inner">
      <p class="logo">Taro Tanaka</p>
      <nav aria-label="メインナビゲーション">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#works">Works</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <section id="about">
      <div class="about-inner">
        <img src="profile.jpg" alt="田中太郎のプロフィール写真" class="profile-image" />
        <div class="about-text">
          <h1>こんにちは、田中太郎です 👋</h1>
          <p class="catchphrase">フロントエンドエンジニア / TypeScript & React</p>
          <p>2024年からWeb開発を学び始め、現在はTypeScriptとReactを中心にフロントエンド開発をしています。</p>
          <ul class="sns-links">
            <li><a href="https://x.com/example" target="_blank" rel="noopener noreferrer">X（旧Twitter）</a></li>
            <li><a href="https://github.com/example" target="_blank" rel="noopener noreferrer">GitHub</a></li>
          </ul>
        </div>
      </div>
    </section>

    <section id="skills">
      <h2>Skills</h2>
      <ul class="skill-list">
        <li class="skill-item">
          <p class="skill-name">HTML / CSS</p>
          <div class="skill-bar" role="img" aria-label="習熟度：上級">
            <div class="skill-bar-fill" style="width: 90%;"></div>
          </div>
        </li>
        <li class="skill-item">
          <p class="skill-name">JavaScript / TypeScript</p>
          <div class="skill-bar" role="img" aria-label="習熟度：中級">
            <div class="skill-bar-fill" style="width: 70%;"></div>
          </div>
        </li>
        <li class="skill-item">
          <p class="skill-name">React</p>
          <div class="skill-bar" role="img" aria-label="習熟度：中級">
            <div class="skill-bar-fill" style="width: 65%;"></div>
          </div>
        </li>
      </ul>
    </section>

    <section id="works">
      <h2>Works & Career</h2>
      <div class="timeline">
        <article class="timeline-item">
          <time datetime="2024-04">2024年4月</time>
          <h3>Web開発の学習を開始</h3>
          <p>独学でHTML・CSS・JavaScriptを学び始める</p>
        </article>
        <article class="timeline-item">
          <time datetime="2024-10">2024年10月</time>
          <h3>初めてのポートフォリオサイトを制作</h3>
          <p>React・TypeScriptを使ったToDoアプリを開発</p>
        </article>
        <article class="timeline-item">
          <time datetime="2025-03">2025年3月</time>
          <h3>フリーランスとして案件を受注</h3>
          <p>企業のコーポレートサイトのフロントエンド実装を担当</p>
        </article>
      </div>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>お仕事のご相談・ご質問はこちらからお気軽にどうぞ。</p>
      <form action="https://formspree.io/f/your-id" method="post">
        <div class="form-group">
          <label for="name">お名前 <span aria-hidden="true">※必須</span></label>
          <input type="text" id="name" name="name" required placeholder="山田 太郎" />
        </div>
        <div class="form-group">
          <label for="email">メールアドレス <span aria-hidden="true">※必須</span></label>
          <input type="email" id="email" name="email" required placeholder="yamada@example.com" />
        </div>
        <div class="form-group">
          <label for="message">メッセージ <span aria-hidden="true">※必須</span></label>
          <textarea id="message" name="message" rows="5" required placeholder="お問い合わせ内容を入力してください"></textarea>
        </div>
        <button type="submit">送信する</button>
      </form>
    </section>
  </main>

  <footer>
    <p>
      <a href="https://x.com/example" target="_blank" rel="noopener noreferrer">X</a>
      ・
      <a href="https://github.com/example" target="_blank" rel="noopener noreferrer">GitHub</a>
    </p>
    <p><small>&copy; 2026 Taro Tanaka. All rights reserved.</small></p>
  </footer>

</body>
</html>

💡 この時点でCSSはまだ書いていないので、見た目は装飾されていません。
ブラウザで開くと、文字だけが並んだ状態になっているはずです。
これは正常です！次回のCSSで見た目を整えていきます。

11. ✅ HTMLの確認チェックリスト

このシリーズで学んだ内容をちゃんと使えているか確認しましょう。

✅ <!DOCTYPE html> を書いているか
✅ <html lang="ja"> で言語指定をしているか
✅ <meta charset="UTF-8"> をheadの最初に書いているか
✅ <title> と <meta description> を設定しているか
✅ <h1> はページに1つだけか
✅ セマンティックタグ（header・main・section・footer）を使っているか
✅ 画像に適切な alt 属性を書いているか
✅ target="_blank" に rel="noopener noreferrer" を付けているか
✅ label と input が for/id で正しく紐づいているか
✅ フォームに required 属性でバリデーションをかけているか

12. 🎯 まとめ

ステップ	やったこと
① 完成イメージを決める	ワイヤーフレームで配置を決めた
② 骨組みを作る	セマンティックタグでページ構造を作った
③ 各セクションを実装	ヘッダー・自己紹介・スキル・経歴・お問い合わせ・フッター

今回は「意味のあるHTML」を書くことに集中しました。
HTMLシリーズで学んだセマンティックタグ・アクセシビリティの知識を実際に使うことで、より深く理解できたのではないでしょうか？

次回は CSSでデザインを整える を解説します！
CSS変数でカラーテーマを定義し、Flexbox・Gridでレイアウトを組んで、
今は文字だけのページを美しく仕上げていきます🎨

💬 質問や感想があれば、コメント欄でお気軽にどうぞ!
👍 役に立ったら、いいね&ストックをお願いします!
🎓 ここまで読んでくださって、本当にありがとうございました!

🔗 シリーズ記事

【第一回】構成を考える・HTMLで骨組みを作る（この記事）
【第二回】CSSでデザインを整える（近日公開）
【第三回】レスポンシブ対応・仕上げ・公開する（近日公開）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up