English 中文 العربية 日本語 Português

Bootstrap: 実践プロジェクト：企業ウェブサイトのホームページ

最終更新：2026-08-26

1. レッスンの紹介

(1) 前提条件

(2) 🎯 学習目標

(3) 痛点

Aliceは真っ白なページに直面し、企業ウェブサイトのホームページをゼロから構築する必要があります—Navbar、Hero、機能カード、チーム紹介、連絡フォーム、そしてフッターです。各モジュールは慎重な設計が必要で、どこから手をつけるべきか分かりません。

(4) 解決策

このレッスンでは、前の18のレッスンで学んだ知識を総合的に応用し、完全な企業ウェブサイトのホームページをゼロから構築します。Aliceは初めて完全なBootstrapプロジェクトを一人で完成させます—このレッスンのテンプレートを使用して、自分のポートフォリオウェブサイトを作成します。

理解のヒント： 実践 = ブロックで家を建てること—以前に学んだ各コンポーネント（Navbar、カード、カルーセル、フォーム）はブロックです。今、それらを完全なページに組み合わせます。

(5) 利点

このレッスンのテンプレートを通じて、Aliceは完全なレスポンシブな企業ウェブサイトのホームページを正常に構築しました。すべてのモジュールはBootstrapコンポーネントを再利用しており、コードはクリーンで標準化されており、本番環境で使用するにはコンテンツを置き換えるだけです。

2. プロジェクトの概要

以下のモジュールを含む企業ウェブサイトのホームページを構築します：

100% 
graph TD
    A[Navbar - 上部固定] --> B[ヒーローバナー - 全幅背景 + CTA]
    B --> C[特徴 - 3つのカード]
    C --> D[会社概要 - テキストと画像の混合]
    D --> E[チーム - 4人のメンバーカード]
    E --> F[連絡フォーム - フォーム + 情報]
    F --> G[フッター - リンク + 著作権]

出力例： Bootstrap 5.3 スタイルの効果的なコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル 完全な企業ウェブサイトテンプレート

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Acme Corp - Home</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="bi bi-box me-2"></i>Acme Corp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#hero">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#team">Team</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <section id="hero" class="bg-primary text-white py-5 mt-5">
    <div class="container text-center py-5">
      <h1 class="display-4 fw-bold">Build Faster with Bootstrap</h1>
      <p class="lead mb-4">A modern, responsive framework for your next project.</p>
      <a href="#features" class="btn btn-light btn-lg px-4">Learn More</a>
      <a href="#contact" class="btn btn-outline-light btn-lg px-4 ms-2">Contact Us</a>
    </div>
  </section>

  <!-- Features -->
  <section id="features" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Why Choose Us</h2>
      <div class="row g-4">
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-lightning-charge-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Fast Performance</h5>
              <p class="card-text text-body-secondary">Optimized for speed with minimal CSS and JS footprint.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-phone-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Fully Responsive</h5>
              <p class="card-text text-body-secondary">Works flawlessly on mobile, tablet, and desktop.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-palette-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Customizable</h5>
              <p class="card-text text-body-secondary">Easy to theme with Sass variables and CSS custom properties.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- About -->
  <section class="py-5 bg-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <img src="https://via.placeholder.com/600x400/0d6efd/fff?text=About+Us" class="img-fluid rounded-3 shadow" alt="About">
        </div>
        <div class="col-lg-6">
          <h2>About Our Company</h2>
          <p class="lead text-body-secondary">We have been building web solutions since 2015.</p>
          <p>Our team of experienced developers uses Bootstrap to create fast, reliable, and beautiful web applications for clients worldwide.</p>
          <ul class="list-unstyled">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>200+ projects delivered</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50+ enterprise clients</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>99% client satisfaction</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Team -->
  <section id="team" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Meet Our Team</h2>
      <div class="row g-4">
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/0d6efd/fff?text=AW" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Alice">
            <div class="card-body">
              <h5 class="card-title">Alice Wang</h5>
              <p class="card-text text-body-secondary">CEO & Founder</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/198754/fff?text=BC" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Bob">
            <div class="card-body">
              <h5 class="card-title">Bob Chen</h5>
              <p class="card-text text-body-secondary">CTO</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/dc3545/fff?text=CL" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Charlie">
            <div class="card-body">
              <h5 class="card-title">Charlie Li</h5>
              <p class="card-text text-body-secondary">Lead Developer</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/6f42c1/fff?text=DY" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Diana">
            <div class="card-body">
              <h5 class="card-title">Diana Yang</h5>
              <p class="card-text text-body-secondary">UX Designer</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact" class="py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-5">Get In Touch</h2>
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
          <form class="needs-validation" novalidate>
            <div class="mb-3">
              <label class="form-label">Name</label>
              <input type="text" class="form-control" required>
              <div class="invalid-feedback">Please enter your name.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">Email</label>
              <input type="email" class="form-control" required>
              <div class="invalid-feedback">Please enter a valid email.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">Message</label>
              <textarea class="form-control" rows="4" required></textarea>
              <div class="invalid-feedback">Please enter a message.</div>
            </div>
            <button class="btn btn-primary w-100" type="submit">Send Message</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-dark text-white py-4">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <p class="mb-0">&copy; 2026 Acme Corp. All rights reserved.</p>
        </div>
        <div class="col-md-6 text-md-end">
          <a href="#" class="text-white me-3"><i class="bi bi-twitter-x"></i></a>
          <a href="#" class="text-white me-3"><i class="bi bi-github"></i></a>
          <a href="#" class="text-white"><i class="bi bi-linkedin"></i></a>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    (function() {
      var forms = document.querySelectorAll('.needs-validation')
      Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
  </script>
</body>
</html>
▶ 試してみよう

出力例： Bootstrap 5.3 スタイルの効果的なコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

3. モジュール分解

モジュール 使用するコンポーネント/ユーティリティクラス テクニカルポイント
Navbar navbar-expand-lg fixed-top scroll 上部に固定、内部リンクはスムーズスクロール
Hero display-4 lead btn-lg bg-primary 全幅背景 + デュアルCTAボタン
特徴 card h-100 shadow-sm row-cols-* 3つの等高カード、JS不要
会社概要 row align-items-center img-fluid テキストと画像を並べて表示、レスポンシブな折り返し
チーム rounded-circle card border-0 レスポンシブな4人グリッド
フォーム form-control needs-validation 完全なフォームバリデーション
フッター bg-dark flex text-md-end レスポンシブな左右カラム

4. モジュールのバリエーションと拡張

▶ サンプル ヒーローセクションのバリエーション

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hero Variations</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <!-- Hero Type 1: Centered Text -->
  <section class="bg-primary text-white py-5">
    <div class="container text-center py-4">
      <h1 class="display-4 fw-bold">Centered Hero</h1>
      <p class="lead mb-4">Simple centered text with CTA buttons.</p>
      <a href="#" class="btn btn-light btn-lg px-4">Get Started</a>
    </div>
  </section>

  <!-- Hero Type 2: Split Image + Text -->
  <section class="bg-dark text-white py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <h1 class="display-5 fw-bold">Split Layout Hero</h1>
          <p class="lead mb-4">Text on left, image on right. Great for product pages.</p>
          <a href="#" class="btn btn-warning btn-lg">Learn More</a>
        </div>
        <div class="col-lg-6 text-center">
          <i class="bi bi-laptop display-1 text-warning"></i>
        </div>
      </div>
    </div>
  </section>

  <!-- Hero Type 3: Background Image -->
  <section class="py-5" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/1200x400/333/fff?text=BG'); background-size: cover; background-position: center;">
    <div class="container text-center py-5 text-white">
      <p class="text-uppercase small fw-bold text-warning">Limited Offer</p>
      <h1 class="display-4 fw-bold">Background Image Hero</h1>
      <p class="lead mb-4">With overlay gradient for readability.</p>
      <div class="d-flex justify-content-center gap-2">
        <a href="#" class="btn btn-warning btn-lg px-4">Shop Now</a>
        <a href="#" class="btn btn-outline-light btn-lg px-4">Learn More</a>
      </div>
    </div>
  </section>
</body>
</html>
▶ 試してみよう

出力例： Bootstrap 5.3 スタイルの効果的なコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル アイコン付き特徴グリッド

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feature Grid with Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">Why Choose Us</h2>
    <div class="row g-4">
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-rocket-takeoff fs-2 text-primary"></i>
          </div>
          <h5>Fast Delivery</h5>
          <p class="text-body-secondary small">Lightning-fast deployment with global CDN.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-success bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-shield-check fs-2 text-success"></i>
          </div>
          <h5>Secure</h5>
          <p class="text-body-secondary small">Enterprise-grade security built-in.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-warning bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-graph-up-arrow fs-2 text-warning"></i>
          </div>
          <h5>Scalable</h5>
          <p class="text-body-secondary small">Grows with your business, no limits.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-info bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-headset fs-2 text-info"></i>
          </div>
          <h5>24/7 Support</h5>
          <p class="text-body-secondary small">Round-the-clock expert assistance.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力例： Bootstrap 5.3 スタイルの効果的なコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル 顧客の声カルーセル

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testimonial Carousel</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">What Our Clients Say</h2>
    <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-primary"></i>
            <p class="lead mb-4">"Bootstrap transformed our development workflow. We shipped the MVP in 2 weeks instead of 2 months."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/0d6efd/fff?text=JD" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>John Doe</strong>
                <small class="d-block text-body-secondary">CEO, TechStart</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-success"></i>
            <p class="lead mb-4">"The responsive components saved us countless hours. Everything just works across all devices."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/198754/fff?text=JS" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Jane Smith</strong>
                <small class="d-block text-body-secondary">CTO, WebFlow Inc</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-warning"></i>
            <p class="lead mb-4">"Sass customization was a game-changer. We matched our brand perfectly without fighting the framework."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/dc3545/fff?text=MW" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Mike Wang</strong>
                <small class="d-block text-body-secondary">Lead Dev, DesignCo</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力例： Bootstrap 5.3 スタイルの効果的なコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル 料金テーブルセクション

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Table</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-2">Pricing Plans</h2>
    <p class="text-center text-body-secondary mb-5">Choose the plan that fits your needs.</p>
    <div class="row g-4 justify-content-center">
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Starter</h5>
          <div class="display-4 fw-bold my-3">$9</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>1 project</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>5GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Basic support</li>
            <li class="mb-2 text-body-tertiary"><i class="bi bi-x-circle-fill me-2"></i>Advanced analytics</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Get Started</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-primary border-2 shadow">
          <div class="badge bg-primary text-uppercase mb-2" style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);">Popular</div>
          <h5>Professional</h5>
          <div class="display-4 fw-bold my-3">$29</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>10 projects</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Priority support</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Advanced analytics</li>
          </ul>
          <button class="btn btn-primary w-100 mt-auto">Get Started</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Enterprise</h5>
          <div class="display-4 fw-bold my-3">$99</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Unlimited projects</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>500GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>24/7 support</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Custom integrations</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Contact Us</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力例： Bootstrap 5.3 スタイルの効果的なコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) ページコンポーネント参照表

セクション 推奨コンポーネント ユーティリティクラスの組み合わせ レスポンシブな使用法
Hero container + display-* bg-primary text-white py-5 text-center text-md-start
機能カード card + row-cols-* border-0 shadow-sm h-100 col-12 col-md-4
会社概要 row align-items-center img-fluid rounded-3 shadow col-lg-6 のスタック
チーム card + rounded-circle border-0 text-center col-6 col-lg-3
お客様の声 carousel + card border-0 p-5 mx-auto d-none d-md-block
料金 card + list-unstyled border-primary shadow col-lg-3 col-md-6
フォーム form-control + needs-validation w-100 mb-3 col-md-8 col-lg-6
フッター bg-dark text-white py-4 text-md-end col-md-6 カラム

(2) レスポンシブブレークポイント参照表

ブレークポイント クラスプレフィックス 最小幅 対象デバイス
X-Small なし < 576px モバイル縦向き
Small sm ≥ 576px モバイル横向き
Medium md ≥ 768px タブレット
Large lg ≥ 992px ノートパソコン
X-Large xl ≥ 1200px デスクトップモニター
XX-Large xxl ≥ 1400px ワイドモニター
このテンプレートで使用 md / lg MD + LG タブレットからデスクトップまでカバー

(3) カラースキームマッピング表

CSS変数 デフォルト値 ブランドカラー例 使用法
--bs-primary #0d6efd #6f42c1（紫） 主要ボタン、リンク、アクセントカラー
--bs-secondary #6c757d #adb5bd（グレー） セカンダリテキスト、補助情報
--bs-success #198754 #20c997（シアン） 成功状態、完了フィードバック
--bs-warning #ffc107 #fd7e14（オレンジ） 警告、注意、プロモーションマーカー
--bs-danger #dc3545 #e83e8c（ピンク） エラー、削除、高リスク
--bs-info #0dcaf0 #0d6efd（青） 情報アラート、ガイダンスマーカー
--bs-light #f8f9fa #f8f9fa ライト背景エリア
--bs-dark #212529 #1a1a2e フッター、ダークエリア

❓ よくある質問

Q この企業ウェブサイトを本番環境で直接使用できますか？
A テンプレートは直接使用できますが、以下をお勧めします：(1) プレースホルダー画像を実際のコンテンツに置き換える、(2) ブランドカラーに合わせてSass変数を変更する、(3) 実際のバックエンドフォーム処理ロジックを追加する、(4) SEOメタタグを追加する。
Q ページをよりパーソナライズするにはどうすればよいですか？
A フェーズ5のSassカスタマイズにより、ブランドカラー、カスタムフォント、グローバルなスペーシングの変更を実現できます。CSS変数を使用してBootstrapのデフォルトを素早くオーバーライドすることもできます。
Q スクロール時にNavbarのアクティブ状態はどのように更新されますか？
A スクロールイベントをリッスンするJavaScriptと、IntersectionObserverを組み合わせて、現在表示されているセクションを判断する必要があります。これはBootstrapの組み込み機能ではありませんが、サードパーティのライブラリで実現できます。
Q このテンプレートは異なる画面にどのように適応しますか？
A テンプレートは本質的にレスポンシブです：col-md-4はモバイルで自動的にスタックされ、navbar-expand-lgは狭い画面でハンバーガーメニューに折りたたまれ、img-fluidは画像をレスポンシブにします。適応性を高めるために、col-12 col-sm-6 col-lg-3などのブレークポイントクラスを追加して異なる画面でのカラム数を制御したり、モバイルで二次モジュールを非表示にするためにd-none d-md-blockを使用したりできます。
Q プロジェクトで使用すべきBootstrapのデフォルトスタイルとカスタムCSSの割合はどのくらいですか？
A 80/20の原則をお勧めします：80%がBootstrapのユーティリティクラスとコンポーネント、20%がカスタムCSSです。まず、ユーティリティクラスでレイアウトとスペーシングを行い、Sass変数でブランドカラーをオーバーライドし、最後に特別な効果のためにカスタムCSSを追加します。Bootstrapプロジェクトを「フルカスタムCSS」に変えないようにしてください—そうすればフレームワークの効率性の利点が失われます。

📖 まとめ

📝 練習問題

  1. ⭐ このレッスンのテンプレートに基づいて、個人のポートフォリオホームページを作成します：ブランド名を自分の名前に変更し、ヒーローセクションを「こんにちは、[あなたの名前]です」に変更し、特徴セクションを自分のスキルタグに変更し、チームセクションを自分のプロジェクトの紹介に変更します。
  2. ⭐⭐ テンプレートに新しい「お客様の声」カルーセルモジュールを追加します。carousel + cardの組み合わせを使用します。
  3. ⭐⭐⭐ スクロールアニメーションを追加します：Bootstrapのdata-bs-*属性またはシンプルなCSS @keyframesを使用して、ページモジュールが読み込み時にフェードインするようにします。

前のレッスン： ユーティリティクラス · 次のレッスン： Sassカスタマイズ

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%