Bootstrapで今から何か作りたい人に読んでほしい初心者向けチュートリアル

はじめに

ブートストラップは、ウェブサイト制作を効率化する人気のCSSフレームワークです。このフレームワークを使うことで、レスポンシブデザインの美しいウェブサイトを簡単に作成できます。

1. ブートストラップの導入

まず、HTMLファイルにブートストラップのCSSとJavaScriptを読み込みます。

<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>

2. グリッドシステム

ブートストラップのグリッドシステムを使用して、レイアウトを作成します。

<div class="container">
  <div class="row">
    <div class="col-md-6">左側のカラム</div>
    <div class="col-md-6">右側のカラム</div>
  </div>
</div>

3. ナビゲーションバー

レスポンシブなナビゲーションバーを作成します。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ロゴ</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">ホーム</a></li>
    <li class="nav-item"><a class="nav-link" href="#">about</a></li>
  </ul>
</nav>

4. ボタン

様々なスタイルのボタンを簡単に作成できます。

<button class="btn btn-primary">プライマリーボタン</button>
<button class="btn btn-secondary">セカンダリーボタン</button>

5. フォーム

フォーム要素のスタイリングも簡単です。

<form>
  <div class="form-group">
    <label for="email">メールアドレス:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

6. カード

情報を整理して表示するためのカードコンポーネントを使用します。

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">カードの内容</p>
  </div>
</div>

7. アラート

ユーザーに情報を伝えるためのアラートを作成します。

<div class="alert alert-success" role="alert">
  成功メッセージ
</div>

8. モーダル

ポップアップウィンドウを簡単に作成できます。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  モーダルを開く
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        モーダルの内容
      </div>
    </div>
  </div>
</div>

9. ドロップダウン

ドロップダウンメニューを作成します。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップダウン
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
    <li><a class="dropdown-item" href="#">アクション2</a></li>
  </ul>
</div>

10. タブ

タブ付きのインターフェースを作成します。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">ホーム</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">プロフィール</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームの内容</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールの内容</div>
</div>

11. ページネーション

ページネーションを簡単に実装できます。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">前</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">次</a></li>
  </ul>
</nav>

12. プログレスバー

進捗状況を表示するプログレスバーを作成します。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

13. ツールチップ

要素にツールチップを追加します。

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="ツールチップの内容">
  ツールチップ付きボタン
</button>

14. スピナー

ローディング中の表示に使用するスピナーを作成します。

<div class="spinner-border" role="status">
  <span class="visually-hidden">読み込み中...</span>
</div>

15. ユーティリティクラス

マージンやパディングなどを簡単に調整できるユーティリティクラスを使用します。

<div class="mt-3 p-2 bg-primary text-white">
  マージントップ3、パディング2の青い背景に白文字のdiv
</div>

以上が、ブートストラップCSSの基本的な使い方です。これらの要素を組み合わせることで、美しくレスポンシブなウェブサイトを簡単に作成できます.