Part3：HTMLで基本の構造を作ろうポートフォリオコーディング+Bootstrap

2025年3月23日

URLをコピーしました！

デザインカンプの作成が終わったら、いよいよコーディングを始めましょう。
最初のステップでは、デザインにとらわれすぎず、内容に合わせた正しいHTMLマークアップを意識することが大切です。以下に、完成形となるポートフォリオのサンプルサイトを掲載していますので、最終的なイメージとして参考にしてください。

ポートフォリオサンプルサイト

コーディングの前に：事前準備をしておこう

コーディングを始める前に、以下の準備をしておくとスムーズに進められます。

画像フォルダを作る
　同じフォルダ内に images フォルダを作成し、デザインカンプ（Figmaなど）から書き出した画像を保存します。バナー画像やロゴ画像など、わかりやすいファイル名に変更し、必要になりそうな画像をまとめて入れておきましょう。
作業フォルダを作成する
　自分のPCのわかりやすい場所（デスクトップや「作業用」フォルダなど）に、portfolio という名前のフォルダを作成します。
HTMLファイルを作る
　その中に index.html という名前のファイルを新規作成しましょう。これがメインのHTMLファイルになります。

フォルダ構成（例）

portfolio/             ← 作業用フォルダ
├── index.html         ← メインのHTMLファイル
├── css/               ← CSSファイル用フォルダ
│   └── style.css      ← オリジナルのスタイルを書くCSS
├── images/            ← 画像を入れるフォルダ
│   ├── logo.svg
│   ├── banner01.jpg
│   └── mee.png
├── js/                ← JavaScriptファイル用フォルダ（任意）
│   └── script.js

STEP 1：HTML模写でポートフォリオを作る

ポートフォリオの基本構造（骨組み）をHTMLだけで作成してみましょう。以下が基本的な要素のみ入った状態のでHTMLコードです。以下のコードを一度、自分でエディタに模写してみましょう。index.htmlファイルを開いて作成します。
「どこが何の役割なのか」を意識しながら、手を動かしていくことが大切です。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
</head>

<body>

    <header>
        <h1>My Portfolio</h1>
        <nav>
            <ul>
                <li><a href="#works_branding">Works Branding</a></li>
                <li><a href="#works_banner">Works Banner</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#profile">Profile</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>

        <figure id="kv">
            <div class="kv"></div>
            <figcaption class="kv_content">
                <p>クライアント様のビジョンを最大限に活かし、デザイン・サイト制作を行います。</p>
                <p>視認性・操作性を考慮した高品質なUI/UX設計で、使いやすく美しいウェブサイトを構築。</p>
                <p>将来の拡張性や運用のしやすさも重視し、最適なソリューションを提供します。</p>
            </figcaption>
        </figure>

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

            <section id="works_branding">
                <h3>Branding</h3>
                <p>ここに制作事例を入れていきます。</p>
            </section>

            <section id="works_banner">
                <h3>Banner</h3>
                <p>ここにバナーの実績を入れていきます。</p>
            </section>
        </section>


        <section id="skills" class="skills container-fluid">
            <div class="container">
                <div class="section_title">
                    <h2 class="skills__title">Skills</h2>
                </div>
                <!-- スキルアイコンのリスト -->
            </div>
        </section>


        <section id="profile">
            <h2>Profile</h2>
            <p>フルスタックエンジニア / 講師</p>
            <p>観葉植物を愛するWeb制作者</p>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <form action="#" method="post">
                <label for="name">お名前</label>
                <input type="text" id="name" name="name"><br>

                <label for="email">メールアドレス</label>
                <input type="email" id="email" name="email"><br>

                <label for="message">メッセージ</label><br>
                <textarea id="message" name="message" rows="5" cols="30"></textarea><br>

                <input type="submit" value="送信">
            </form>
        </section>

    </main>

    <footer>
        <p>&copy; 2025 Your Name. All rights reserved.</p>
    </footer>

</body>

</html>

`id` を付ける理由と使い方

HTMLの各セクションに id を付けておくことで、ページ内リンク（アンカーリンク）が使えるようになります。たとえば、ナビゲーションメニューにある以下のコード

<a href="#profile">Profile</a>

これは、id="profile" と指定されたセクションへページ内でスムーズにジャンプするリンクです。
シングルページ（1ページ完結型）ポートフォリオでは、同一ページ内での移動が多いので、このid設定がとても大事になります。

この段階では、見た目は気にしなくてOK

まだCSSを一切使っていないので、レイアウトや見た目（フォント・余白・色など）は整っていません。
項目が縦にズラリと並ぶだけで、デザイン的には物足りなく見えるかもしれませんが…

今は「HTMLの構造（タグやセクション分け）を正しく理解する」ことが目的です。

Bootstrapでレイアウトを整える

HTMLで作った構造に、Bootstrapのクラスを加えることで、

横並びのレイアウト（グリッド）
モバイル対応（レスポンシブ）
見た目の改善（余白や中央寄せなど

を簡単に整えていきます。

Bootstrapを使う理由

Bootstrapは、クラスを追加するだけでレイアウトが整うCSSフレームワークです。HTMLの構造はほぼそのままで、次のようなことが実現できます。

カラム（横並び）の配置
コンテナ（左右の余白）を付ける
テキストの中央寄せ、余白の調整
スマホ・PCの表示切り替え（モバイルファースト対応）

コードを見ながら整えてみよう

変更前のコード（HTMLのみ）

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

  <section id="works_branding">
    <h3>Branding</h3>
    <p>ここに制作事例を入れていきます。</p>
  </section>

  <section id="works_banner">
    <h3>Banner</h3>
    <p>ここにバナーの実績を入れていきます。</p>
  </section>
</section>

Bootstrapのクラスを追加した例（コンテナ、中央寄せ、余白）

<section id="works" class="container my-5">
  <h2 class="text-center mb-4">Works</h2>

  <section id="works_branding" class="mb-5">
    <h3 class="h5">Branding</h3>
    <p>ここに制作事例を入れていきます。</p>
  </section>

  <section id="works_banner">
    <h3 class="h5">Banner</h3>
    <p>ここにバナーの実績を入れていきます。</p>
  </section>
</section>

container：画面幅に応じて左右に余白をつけるためのクラスです。
my-5：上下に余白（margin）を追加するクラス。
1はおおよそ0.25emとなり５で3emぐらいの余白。詳細はBootstrap公式スペーシング参照
text-center：テキストを中央に配置します。
mb-4 や mb-5：下にスペースをつける（margin-bottom）。
h5：見た目だけ小さな見出しサイズにしたいときに便利です（構造的にはh3でもOK）。

よく使うBootstrapクラス（基本）

クラス名	説明
`container`	中央寄せレイアウト、左右に余白がつく
`row`	横並びレイアウトの基礎行
`col-6`, `col-md-4`	カラムの幅指定（数字は12分割の比率）
`text-center`	テキストを中央に配置
`mb-4`, `py-3`	余白の調整（margin/padding）

Bootstrapを追加した模写コード

下記のコードは、<head>要素内にBootstrapのCDNを追加し、レイアウトや装飾のために各要素へBootstrapのクラス名（例：container、row、col-md-6など）を指定した形です。
最初に模写したシンプルなHTML構造にBootstrapを加えることで、より整ったレイアウトに仕上がっています。この段階ではオリジナルのCSSはまだ使用せず、Bootstrapのみでデザインを整えることを目的としています。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body id="top">
  <header class="container py-3">
    <h1 class="text-center mb-3">My Portfolio</h1>
    <nav class="text-center">
      <ul class="nav justify-content-center">
        <li class="nav-item"><a href="#works_branding" class="nav-link">Works Branding</a></li>
        <li class="nav-item"><a href="#works_banner" class="nav-link">Works Banner</a></li>
        <li class="nav-item"><a href="#skills" class="nav-link">Skills</a></li>
        <li class="nav-item"><a href="#profile" class="nav-link">Profile</a></li>
        <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <figure class="container text-center my-5" id="kv">
      <div class="mb-3">[キービジュアル画像をCSSで設定]</div>
      <figcaption>
        <p>クライアント様のビジョンを最大限に活かし、デザイン・サイト制作を行います。</p>
        <p>視認性・操作性を考慮した高品質なUI/UX設計で、使いやすく美しいウェブサイトを構築。</p>
        <p>将来の拡張性や運用のしやすさも重視し、最適なソリューションを提供します。</p>
      </figcaption>
    </figure>

    <section id="works_branding" class="container mb-5">
      <h2 class="mb-4">Works - Branding</h2>
      <div class="row">
        <div class="col-md-6 mb-4">
          <h3>un_HAM</h3>
          <p>新鮮な野菜を使ったハンバーガーショップのWebサイト制作。</p>
          <p>無添加バンズとオーガニック素材でシンプルなブランド表現。</p>
          <a href="#" class="btn btn-outline-primary">サイトを見る</a>
        </div>
        <div class="col-md-6 mb-4">
          <h3>KOBE MODE</h3>
          <p>スマホ専用ショッピングサイトのUI設計。</p>
          <p>20〜30代女性をターゲットにした直感的なデザイン。</p>
          <a href="#" class="btn btn-outline-primary">サイトを見る</a>
        </div>
      </div>
    </section>

    <section id="works_banner" class="container mb-5">
      <h2 class="mb-4">Works - Banner</h2>
      <div class="row">
        <div class="col-md-4 mb-4">
          <img src="images/bn_jimu600_500.jpg" alt="ジム" class="img-fluid border">
        </div>
        <div class="col-md-4 mb-4">
          <img src="images/ba600_500.jpg" alt="眼科医" class="img-fluid border">
        </div>
        <div class="col-md-4 mb-4">
          <img src="images/01.jpg" alt="エンジニア" class="img-fluid border">
        </div>
      </div>
    </section>

    <section id="skills" class="container mb-5">
      <h2 class="mb-4">Skills</h2>
      <div class="row text-center">
        <div class="col-4 col-md-2 mb-3">
          <img src="images/adobe-photoshop_solid.svg" alt="Photoshop" class="img-fluid">
        </div>
        <div class="col-4 col-md-2 mb-3">
          <img src="images/adobe-illustrator_solid.svg" alt="Illustrator" class="img-fluid">
        </div>
        <div class="col-4 col-md-2 mb-3">
          <img src="images/html-5_solid.svg" alt="HTML" class="img-fluid">
        </div>
        <div class="col-4 col-md-2 mb-3">
          <img src="images/css-3_solid.svg" alt="CSS" class="img-fluid">
        </div>
        <div class="col-4 col-md-2 mb-3">
          <img src="images/js_solid.svg" alt="JavaScript" class="img-fluid">
        </div>
        <div class="col-4 col-md-2 mb-3">
          <img src="images/wordpress_solid.svg" alt="WordPress" class="img-fluid">
        </div>
      </div>
    </section>

    <section id="profile" class="container mb-5">
      <h2 class="mb-4">Profile</h2>
      <p>フルスタックエンジニア / 講師</p>
      <p>観葉植物を愛するWeb制作者</p>
    </section>

    <section id="contact" class="container mb-5">
      <h2 class="mb-4">Contact</h2>
      <form action="#" method="post">
        <div class="mb-3">
          <label for="name" class="form-label">お名前</label>
          <input type="text" id="name" name="name" class="form-control">
        </div>
        <div class="mb-3">
          <label for="email" class="form-label">メールアドレス</label>
          <input type="email" id="email" name="email" class="form-control">
        </div>
        <div class="mb-3">
          <label for="message" class="form-label">メッセージ</label>
          <textarea id="message" name="message" rows="5" class="form-control"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">送信</button>
      </form>
    </section>
  </main>

  <footer class="text-center py-4">
    <a href="#top">Top</a>
    <p class="mt-2 small">&copy; 2025 Your Name. All rights reserved.</p>
  </footer>

</body>

</html>