boostrap入門！

Posted at 2025-07-25

はじめに

Web 制作を効率化し、レスポンシブ対応を簡単に実現できるフロントエンドフレームワーク Bootstrap 5 の基礎から実践までを、サンプルコード付きで解説します。

1. Bootstrap とは

Twitter 社 が開発したオープンソースの CSS フレームワーク
レスポンシブデザイン対応済み
豊富な UI コンポーネント（ボタン、ナビバー、カードなど）を標準搭載
Sass 変数でテーマや色をカスタマイズ可能

2. 環境構築（インストール方法）

CDN で試す

<!-- head 内に貼るだけ -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
></script>

npm／Yarn で導入

npm

npm install bootstrap

Yarn

yarn add bootstrap

ES Modules で読み込む例

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

3. グリッドシステム

12 分割のレスポンシブグリッドでレイアウトを簡単に組めます。

<div class="container">
  <div class="row">
    <div class="col-md-4">カラム1</div>
    <div class="col-md-4">カラム2</div>
    <div class="col-md-4">カラム3</div>
  </div>
</div>

.container：コンテンツを中央寄せ＆左右に余白

.row：行を定義

.col-{breakpoint}-{size}：ブレークポイントごとの幅指定

<div class="row">
  <div class="col-12 col-sm-6 col-lg-4">—</div>
  <div class="col-12 col-sm-6 col-lg-4">—</div>
  <div class="col-12 col-sm-6 col-lg-4">—</div>
</div>

4. 主要コンポーネント紹介

4.1 ボタン

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>

4.2 ナビゲーションバー

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navMenu"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

4.3 カード

<div class="card" style="width: 18rem;">
  <img src="path/to/image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">カードタイトル</h5>
    <p class="card-text">説明文。</p>
    <a href="#" class="btn btn-primary">詳細を見る</a>
  </div>
</div>

5. カスタマイズ方法

プロジェクト直下に _custom.scss を作成し、Sass 変数を上書きします。

// _custom.scss
$primary: #ff5722;
$font-family-base: 'Noto Sans JP', sans-serif;
@import "custom";
@import "~bootstrap/scss/bootstrap";

ユーティリティクラス（.text-primary など）も自動で反映されます。

6. 実践例：ランディングページ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>ランディングページ</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
</head>
<body>
  <!-- ヘッダー -->
  <header class="bg-primary text-white text-center py-5">
    <h1>My Product</h1>
    <p class="lead">最高のプロダクトをお届けします</p>
    <a href="#features" class="btn btn-light btn-lg">詳しく見る</a>
  </header>

  <!-- 特徴セクション -->
  <section id="features" class="container py-5">
    <div class="row g-4">
      <div class="col-md-4 text-center">
        <i class="bi bi-speedometer2 display-4"></i>
        <h3>高速</h3>
        <p>〜100ms レスポンス</p>
      </div>
      <div class="col-md-4 text-center">
        <i class="bi bi-shield-lock display-4"></i>
        <h3>安全</h3>
        <p>最新セキュリティ実装</p>
      </div>
      <div class="col-md-4 text-center">
        <i class="bi bi-phone display-4"></i>
        <h3>モバイル対応</h3>
        <p>スマホでも快適</p>
      </div>
    </div>
  </section>

  <!-- フッター -->
  <footer class="bg-dark text-white text-center py-3">
    &copy; 2025 My Company
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

7. おわりに

Bootstrap を活用することで、UI 開発の効率が大幅にアップします。
ぜひあなたのプロジェクトに取り入れてみてください！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up