基本知識 2026年7月2日

【HTML基礎講座第10回】実践！学んだすべてのタグを組み合わせて自己紹介サイトを完成させる

HTML基礎講座全10回（第10回・最終回）

実践！学んだすべてのタグを組み合わせて1枚の自己紹介サイトを完成させる

ついに最終回です！これまで第1回〜第9回で学んだすべてのHTMLタグ（見出し、段落、リスト、リンク、画像、テーブル、フォーム、セマンティック構造）を統合し、実際に公開できるレベルの完成されたランディングページを構築しましょう。

📌 講座ロードマップ一覧（クリックで移動）

第1回第2回第3回第4回第5回第6回第7回第8回第9回第10回

1. 作成するWebページのレイアウト設計

コーディングを始める前に、ページの設計図（ワイヤーフレーム）を頭に描きます。今回は、フリーランスのWebデベロッパーの「自己紹介兼お仕事依頼ポートフォリオ」を想定し、以下の構成でマークアップします。

図：今回制作する自己紹介ポートフォリオページの構成図

① ヘッダー (header/nav): タイトルと主要セクションへのページ内ナビゲーション。
② メインビジュアル (section/h1/p): キャッチコピー。
③ プロフィール (article/h2/p/img): 自己紹介文と顔写真アセット。
④ サービス内容 (section/ul/li): 提供可能なスキルの一覧。
⑤ 料金プラン (section/table): 制作プランと費用の比較テーブル。
⑥ お問い合わせ (section/form): 連絡先を入力する問い合わせフォーム。
⑦ フッター (footer): 著作権コピーライト表示。

2. 実践コーディング：完全版HTMLソースコード

以下のコードをすべてコピーし、`index.html` という名前で保存してください。CSSによるスタイリングもHTMLに組み込んでいるため、保存してブラウザで開くだけで、スマホ・PC両対応の非常に美しいポートフォリオサイトが表示されます！

portfolio.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Webデベロッパーの自己紹介・ポートフォリオサイトです。">
    <title>ポートフォリオ | Webデベロッパー</title>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 0; color: #333; background: #f8fafc; }
        header { background: #fff; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; }
        nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
        nav a { text-decoration: none; color: #475569; font-weight: bold; }
        .hero { background: linear-gradient(135deg, #e0f2fe, #fce7f3); padding: 80px 20px; text-align: center; }
        .container { max-width: 800px; margin: 40px auto; padding: 0 20px; }
        section { margin-bottom: 60px; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
        h2 { border-left: 5px solid #0284c7; padding-left: 12px; margin-top: 0; }
        table { width: 100%; border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #cbd5e1; padding: 12px; text-align: center; }
        th { background: #f1f5f9; }
        form { display: flex; flex-direction: column; gap: 15px; }
        input, textarea, button { padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 15px; }
        button { background: #0284c7; color: white; border: none; font-weight: bold; cursor: pointer; }
        button:hover { background: #0369a1; }
        footer { background: #1e293b; color: white; text-align: center; padding: 20px; margin-top: 80px; }
    </style>
</head>
<body>

    <header>
        <div style="font-weight: bold; font-size: 20px; color: #0284c7;">MyPortfolio</div>
        <nav>
            <ul>
                <li><a href="#about">自己紹介</a></li>
                <li><a href="#services">サービス</a></li>
                <li><a href="#price">料金</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <div class="hero">
        <h1 style="font-size: 36px; margin-bottom: 10px;">期待以上のWebサイトを、カタチに。</h1>
        <p style="color: #475569;">HTMLとCSSを駆使した、高速で論理的で、美しいWebサイト制作をご提供します。</p>
    </div>

    <div class="container">
        <section id="about">
            <h2>自己紹介</h2>
            <p>フリーランスでWebデベロッパーとして活動している山田太郎と申します。ユーザーファーストかつ論理的なHTMLマークアップを得意としています。</p>
        </section>

        <section id="services">
            <h2>ご提供可能なサービス</h2>
            <ul>
                <li style="margin-bottom: 10px;"><strong>LP（ランディングページ）制作</strong>：集客に強い縦長1ページの構成</li>
                <li style="margin-bottom: 10px;"><strong>企業コーポレートサイト制作</strong>：信頼感を与える論理的な構造設計</li>
                <li><strong>レスポンシブ最適化</strong>：スマートフォンやタブレットでの快適な表示</li>
            </ul>
        </section>

        <section id="price">
            <h2>制作料金プラン</h2>
            <table>
                <tr>
                    <th>プラン名</th>
                    <th>制作費</th>
                    <th>納期</th>
                </tr>
                <tr>
                    <td>ライトプラン</td>
                    <td>100,000円〜</td>
                    <td>約2週間</td>
                </tr>
                <tr>
                    <td>スタンダード</td>
                    <td>250,000円〜</td>
                    <td>約1ヶ月</td>
                </tr>
            </table>
        </section>

        <section id="contact">
            <h2>お問い合わせ</h2>
            <form action="#" method="POST">
                <label for="name">お名前</label>
                <input type="text" id="name" required placeholder="山田 太郎">
                
                <label for="email">メールアドレス</label>
                <input type="email" id="email" required placeholder="example@email.com">
                
                <label for="message">メッセージ</label>
                <textarea id="message" rows="5" required placeholder="制作内容やご予算などをご記入ください"></textarea>
                
                <button type="submit">この内容で送信する</button>
            </form>
        </section>
    </div>

    <footer>
        <p>&copy; 2026 Taro Yamada. All rights reserved.</p>
    </footer>

</body>
</html>