ポートフォリオを作ろう①
HTMLで骨組みを作る

1. 完成イメージ

Lesson 9 まで終わると、最終的にこんなページになります（実際に操作できます）。

そして、今回（HTMLだけ）のゴールはこちら。色も飾りもない、シンプルな見た目です。

2. 準備：フォルダと画像

1. フォルダを作る

   デスクトップに portfolio フォルダを作り、その中にさらに images フォルダを作ります。

   フォルダの構成コピー

   portfolio/
   ├── index.html      ← これから作る
   └── images/
       ├── tetsubo.svg ← 特技の画像
       └── game.svg    ← ハマっているものの画像

2. 画像を用意する

   images フォルダに、特技とハマっているものの画像を1枚ずつ入れます。 練習用のイラスト（tetsubo.svg・game.svg）も用意しました。 リンクを右クリック →「名前を付けてリンク先を保存」で保存できます。

   自分で撮った写真（.jpg や .png）を使ってももちろんOKです。

3. VS Code でフォルダを開く

   VS Code の「ファイル」→「フォルダーを開く」で portfolio フォルダを開きます。

3. 基本の形を作る

VS Code の左側で右クリック →「新しいファイル」を選び、index.html という名前で作ります。 （index.html は「そのフォルダの表紙」という意味の、特別によく使われる名前です）

ファイルを開いたら、Lesson 6 の小ワザ ! ＋ Enter で基本の形を入力します。 自動で入る lang="en" を lang="ja" に、<title> の中を自分のサイト名に書き換えましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mayu Takahashi Portfolio</title>
</head>
<body>

</body>
</html>

色付きの行が、書き換える・書き足す部分です。

<meta name="viewport" …> は「スマホで見たときも、画面の幅に合わせて表示してね」という設定です。 （VS Code の ! で入る内容は、バージョンによって少し違うことがあります）

4. タイトル部分を作る

<body> の中に、ページの一番上に表示するタイトル部分を書きます。

<body>
  <header>
    <h1>Mayu Takahashi Portfolio</h1>
    <p>はじめまして！ 私の好きなものを紹介します。</p>
  </header>
</body>

<header> は「ここはページの頭（ヘッダー）部分です」という意味の箱です。 箱自体は画面に何も表示しませんが、中身をグループにまとめておくことで、次回の CSS で「ヘッダーだけ色を変える」といったことができるようになります。

保存（Ctrl + S）したら、エクスプローラーで index.html を Chrome で開いて確認しましょう。以降も、書いたら保存して Chrome で再読み込み（F5）、をくり返します。

5. 紹介コーナーを作る

次に、ページの本体 <main> を作り、その中に「特技」のコーナーを <section> で作ります。

  </header>

  <main>
    <section>
      <h2>特技：鉄棒</h2>
      <p>子どものころから鉄棒が大好きです。</p>
    </section>
  </main>
</body>

<h2> は <h1> の次に大きい見出しです。ページの題名が h1、各コーナーの見出しが h2、という関係になっています。 本の「タイトル」と「章の見出し」のようなものです。

6. 画像を貼る

「特技」のコーナーに、<img> タグで画像を追加します。

    <section>
      <h2>特技：鉄棒</h2>
      <p>子どものころから鉄棒が大好きです。</p>
      <img src="images/tetsubo.svg" alt="鉄棒のイラスト" width="300">
    </section>

同じようにして、「ハマっているもの」のコーナーも、特技のコーナーの下に追加します。

    </section>

    <section>
      <h2>今いちばんハマっているもの：Valorant</h2>
      <p>5人対5人で戦う、チーム対戦型のシューティングゲームです。</p>
      <img src="images/game.svg" alt="ゲームのイラスト" width="300">
    </section>
  </main>

7. 仕上げと全体のコード

最後に、ページの一番下に <footer> を追加します。© は「©」マークを表示するための書き方です。

  </main>

  <footer>
    <p>&copy; 2026 Mayu Takahashi</p>
  </footer>
</body>

完成した index.html の全体はこちらです。自分のファイルと見比べてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mayu Takahashi Portfolio</title>
</head>
<body>
  <header>
    <h1>Mayu Takahashi Portfolio</h1>
    <p>はじめまして！ 私の好きなものを紹介します。</p>
  </header>

  <main>
    <section>
      <h2>特技：鉄棒</h2>
      <p>子どものころから鉄棒が大好きです。</p>
      <img src="images/tetsubo.svg" alt="鉄棒のイラスト" width="300">
    </section>

    <section>
      <h2>今いちばんハマっているもの：Valorant</h2>
      <p>5人対5人で戦う、チーム対戦型のシューティングゲームです。</p>
      <img src="images/game.svg" alt="ゲームのイラスト" width="300">
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Mayu Takahashi</p>
  </footer>
</body>
</html>

Chrome で開いて、1章の「今回のゴール」と同じように表示されれば完成です！

自分らしくアレンジしよう

• 名前・特技・ハマっているものを、自分のものに書き換える
• 画像を自分の写真に差し替える
• <section> をコピーして、「好きな食べ物」などのコーナーを増やす

迷ったら Claude Code に聞いてみましょう。たとえば、こんなふうに。

index.html に「好きな食べ物」のコーナーを追加したいです。
どこに、どんなタグを書けばいいか、理由も含めて教えてください。コードはまだ書き換えないでください。

「コードはまだ書き換えないで」と添えると、答えを教えてもらうだけで、手を動かすのは自分、という練習ができます。

確認クイズ

選択肢をクリックしてください。

まとめ

• header・main・section・footer は、ページの部分をまとめる箱。
• 見出しはページの題名が h1、各コーナーが h2。
• 画像は <img src="場所" alt="説明"> で貼る。ファイル名は1文字も違わずに。
• 箱の中身は字下げして、構造がひと目でわかるように書く。
• 画像の著作権に気をつける。

骨組みが完成しました。次の Lesson 8 では、CSS でこのページに色を付けて、一気におしゃれにしていきます。