【丸パクリOK！】実務で使えるHTML/CSSテンプレート10選（初中級者向け）

目的：Web制作の初中級者が案件やポートフォリオで“そのまま使える”HTML/CSSテンプレートを10本。シンプルながら実務で役立つパターンを中心にまとめています。すべてバニラHTML/CSSのみで実装。

1. ベーシックなHTML骨組み

用途：最初の1枚を作るときの基本構造。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本テンプレート</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>ヘッダー</header>
  <main>メインコンテンツ</main>
  <footer>フッター</footer>
</body>
</html>

2. シンプルなヘッダー＋ナビゲーション

<header>
  <nav>
    <ul style="display:flex; gap:16px; list-style:none;">
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

3. ヒーローセクション（キャッチコピー＋ボタン）

<section style="padding:60px; text-align:center; background:#f5f5f5;">
  <h1>あなたのビジネスを加速するWeb制作</h1>
  <p>デザインから集客までトータルサポート</p>
  <a href="#contact" style="display:inline-block; padding:12px 20px; background:#007bff; color:#fff; border-radius:6px;">お問い合わせ</a>
</section>

4. 2カラムレイアウト

<section style="display:flex; gap:20px; padding:40px;">
  <div style="flex:1; background:#eee; padding:20px;">左コンテンツ</div>
  <div style="flex:1; background:#ddd; padding:20px;">右コンテンツ</div>
</section>

5. サービス紹介カード

<section style="display:flex; gap:20px; padding:40px;">
  <div style="flex:1; border:1px solid #ccc; padding:20px; border-radius:8px;">
    <h3>サービスA</h3>
    <p>説明文が入ります</p>
  </div>
  <div style="flex:1; border:1px solid #ccc; padding:20px; border-radius:8px;">
    <h3>サービスB</h3>
    <p>説明文が入ります</p>
  </div>
</section>

6. シンプル料金表

<table style="width:100%; border-collapse:collapse;">
  <tr>
    <th style="border:1px solid #ccc; padding:10px;">プラン</th>
    <th style="border:1px solid #ccc; padding:10px;">料金</th>
  </tr>
  <tr>
    <td style="border:1px solid #ccc; padding:10px;">ライト</td>
    <td style="border:1px solid #ccc; padding:10px;">¥5,000</td>
  </tr>
  <tr>
    <td style="border:1px solid #ccc; padding:10px;">スタンダード</td>
    <td style="border:1px solid #ccc; padding:10px;">¥10,000</td>
  </tr>
</table>

7. FAQ（よくある質問）

<section>
  <h2>よくある質問</h2>
  <details>
    <summary>納期はどれくらいですか？</summary>
    <p>通常2〜3週間程度です。</p>
  </details>
  <details>
    <summary>修正は何回まで可能ですか？</summary>
    <p>基本2回まで無料対応です。</p>
  </details>
</section>

8. お問い合わせフォーム

<form action="#" method="post" style="display:grid; gap:12px; max-width:400px;">
  <input type="text" name="name" placeholder="お名前" required>
  <input type="email" name="email" placeholder="メールアドレス" required>
  <textarea name="message" placeholder="ご用件" rows="5" required></textarea>
  <button type="submit" style="padding:10px; background:#007bff; color:#fff; border:none; border-radius:4px;">送信</button>
</form>

9. お客様の声（テスティモニアル）

<section style="padding:40px; background:#f9f9f9;">
  <blockquote style="border-left:4px solid #007bff; padding-left:12px; margin:0 0 20px;">
    <p>依頼して大正解でした！集客が2倍に。</p>
    <cite>株式会社ABC 佐藤様</cite>
  </blockquote>
  <blockquote style="border-left:4px solid #007bff; padding-left:12px; margin:0;">
    <p>丁寧な対応で安心できました。</p>
    <cite>個人事業主 山田様</cite>
  </blockquote>
</section>

10. シンプルなフッター

<footer style="text-align:center; padding:20px; background:#333; color:#fff;">
  <p>© 2025 Your Brand. All rights reserved.</p>
</footer>


✅ ポイント

  • デザインはシンプル、色や余白を少し変えるだけで応用可能