ZeroPlus Media > Web制作 > HTML/CSS > Bootstrapの使い方をわかりやすく解説！導入から実装まで

Bootstrapの使い方をわかりやすく解説！導入から実装まで

HTML/CSS

2022/08/22

2023/06/02

Bootstrapは、CSSフレームワークのひとつです。Web制作で使用するグリッドレイアウトやレイアウトパーツを簡単に作成できるので、制作を大幅に効率化できます。

しかし、Bootstrapをどのように使用すればいいのかわからない方も多いのではないでしょうか。

この記事では、Bootstrapの使い方を解説します。導入方法から基本的な使い方まで、わかりやすく解説した内容となっております。Bootstrapを使ってみたい方はぜひ参考にしてください。

この記事で身につく内容

Bootstrapとは
Bootstrapの導入方法
Bootstrapの使い方-グリッドレイアウト作成
Bootstrapの使い方-コンポーネント作成

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

Web制作を効率よく学ぶには？Web制作スキルを最短で身につけるためには、計画を立てて学習を行うことが大切です。しかし、学習を始めたばかりの人は「何をどのように勉強したらいいかわからない」という場合もあるのではないでしょうか。

そのような人は、学習ロードマップを活用してみましょう。Web制作を仕事にするために必要なスキルを事前に把握しておき、無駄なく学習することができます。

こちらの記事でWeb制作の学習ロードマップを公開していますので、ぜひお役立てください。

初学者が最速でWeb制作者になるために必要なスキルと学習ロードマップ

Bootstrapとは
Bootstrapの導入方法
- CDNを読み込む
- フォルダをダウンロードする
Bootstrapでグリッドレイアウトを作成する
Bootstrapでコンポーネントを配置する
まとめ

Bootstrapとは

Bootstrapとは、Web制作を効率化するフレームワークのひとつです。HTML/CSS、JavaScriptで構成され、ボタンやテーブルなど様々なパーツのテンプレートが用意されています。

Bootstrapを使用するメリットは以下のとおりです。

こBootstrapを使用するメリット

Web制作の効率化
デザインが苦手でもおしゃれなサイトを作れる
レスポンシブ対応が簡単

「Bootstrapってそもそもなんなの？」という方はこちらの記事を参考にしてください。

Bootstrapとは？Web制作を効率化するフレームワークを紹介

Bootstrapの導入方法

Bootstrapを使用するには、以下の2つの方法があります。

CDNを読み込む
フォルダをダウンロードする

CDNを読み込む

Bootstrapを使用する1つ目の方法は、CDNをHTMLファイルで読み込むことです。

CDNとは？

コンテンツ・デリバリー・ネットワークの略であり、オンラインで外部のサービスを利用できるシステムのこと

CDNを読み込む場合は、以下のページに記載されているURLをコピーして、それぞれ特定の場所に貼り付けます。

Bootstrap Introductionページ

Bootstrapでは、CSSとJavaScriptのCDNが必要です。それぞれ記述する場所が決められています。

CSSのCDN

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 </head>

CSSを読み込むときは、HTMLファイルの<head>タグ内の最後に記述します。他にスタイルシートがある場合は、BootstrapのCDNを先頭に配置します。

JavaScript

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
       integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
       crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
       integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
       crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
       integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
       crossorigin="anonymous"></script>
</body>

JavaScriptを読み込むときは、HTMLファイルの <body>タグ内の最後に記述します。 Bootstrapの機能をすべて使うためには、jQueryとPopperの記述が必要です。この2つがあることで、アニメーションを追加する記述の簡略化やツールチップの実装が可能になります。

CDNは記述の順番を間違えてしまうと適用されないため、注意が必要です。また、ローカル環境だとブラウザに反映されないことも把握しておきましょう。

フォルダをダウンロードする

Bootstrapを使用する2つ目の方法は、フォルダをダウンロードすることです。

フォルダのダウンロードは、以下のページから行います。

Bootstrap ダウンロードページ

紫色の「Download」というボタンをクリックすると、ダウンロードが始まります。zip形式でダウンロードされるので、解凍してフォルダを開きましょう。

ダウンロード時点のBootstrapフォルダには、HTMLファイルが存在しません。そのため、自身でHTMLファイルを作成する必要があります。

HTMLファイルを作成したら、以下のページに記載されているテンプレートをコピーして貼り付けます。

Bootstrap Introductionページ

以下のコードをコピーして貼り付けても大丈夫です。

<!doctype html>
<html lang="en">
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <title>Hello, world!</title>
 </head>

 <body>

   <h1>Hello, world!</h1>




   <!-- Optional JavaScript; choose one of the two! -->
   <!-- Option 1: Bootstrap Bundle with Popper -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   <!-- Option 2: Separate Popper and Bootstrap JS -->
   <!--
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
   -->
 </body>
</html>

導入が終了したら、次は具体的な使い方を学習しましょう。

おもな使い方は次の2つです。

グリッドシステムを利用したレイアウト作成
ボタンやテーブルなどのコンポーネント作成

次の項目から詳しく解説していきます。

Bootstrapでグリッドレイアウトを作成する

Bootstrapでは、グリッドシステムを用いたレイアウトの作成が可能です。グリッドとは、ページ内の要素を格子状に配置するレイアウトのことです。

Bootstrapでグリッドシステムを作成するときは、以下のようにHTMLを記述します。

<div>タグを作成し、class=”container”もしくはclass=”container-fluid”と指定する
1の<div>タグの中に新しく<div>タグを作成し、class=”row”とする
2の<div>タグの中に新しく複数の<div>タグを作成し、class=”col-(prefix)-(数値)”とする
(数値)の合計が12になるように指定する

このルールにしたがって、サンプルコードを作成してみましょう。枠線がわかりやすいように.borderを追加しています。

<div class="container">
  <div class="row">
    <div class="col-md-4 border">4</div>
    <div class="col-md-6 border">6</div>
    <div class="col-md-2 border">2</div>
  </div>
</div>

class=”col-(prefix)-(数値)”のprefixの部分は、レスポンシブ対応時に必要となります。画面幅ごとにクラス名が決められているので、適切なprefixを記述するようにしましょう。

画面幅ごとのprefixは以下の表を参照してください。

prefix	画面幅	デバイス
xxl	1400px以上	デスクトップ
xl	1200px~1399px
lg	992px~1199px
md	768px~-991px	タブレット
sm	576px~767px	タブレット
xm	575px以下	モバイル

Bootstrapでコンポーネントを配置する

Bootstrapには、Web制作のレイアウトで使用する様々なコンポーネントが用意されています。コンポーネントとは、レイアウトの構成要素のことです。

Bootstrapでおもに使用するコンポーネントは以下の4つです。

　ボタン
　テーブル
　フォーム
　画像

ボタン

Bootstrapでボタンを作成するときは、<button>タグにclass=”btn-btn-(プロパティ名)”を指定します。

以下がBootstrapで用意されているボタンの一覧です。

   <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
   <button type="button" class="btn btn-success">Success</button>
   <button type="button" class="btn btn-danger">Danger</button>
   <button type="button" class="btn btn-warning">Warning</button>
   <button type="button" class="btn btn-info">Info</button>
   <button type="button" class="btn btn-light">Light</button>
   <button type="button" class="btn btn-dark">Dark</button>

ボタンのサイズ変更やクリック時の動作などのオプションはこちらのサイトで確認してください。

Bootstrap

テーブル

Bootstrapでテーブルを作成するときは、<table>タグに.tableクラスを指定します。

テーブルのデザイン変更はクラスの追加によって行います。おもに使用するclassは以下のとおりです。

class	効果
table-responsive	テーブルを横スクロールにする。<table>タグを囲む<div>タグを配置し、クラスを指定する
table-striped	行の色を1行ずつ交互に変える
table-borderer	セルに枠線を追加する

記述例は以下のとおりです。

<div class="table-responsive">
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">animal</th>
        <th scope="col">fruits</th>
        <th scope="col">season</th>
       </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>cat</td>
        <td>apple</td>
        <td>spring</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>dog</td>
        <td>grape</td>
        <td>summer</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>bird</td>
        <td>peach</td>
        <td>winter</td>
      </tr>
    </tbody>
  </table>
</div>

フォーム

Bootstrapでフォームを作成するときは、以下の2つのclassを指定します。

form-group
form-control

<form>タグの中に<div>タグを作り、.form-groupを指定します。これによりフォーム内の要素をグループ化できます。

<input>タグや<textarea>タグにform-controlを指定することで、スタイルが適用されます。

<form>
  <div class="form-group">
    <label>Your Name</label>
    <input type="name" class="form-control" placeholder="Name">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-secondary">送信</button>
</form>

画像の編集

Bootstrapを使用すると、画像の編集を簡単に行えます。

画像の編集で使用するclassは以下のとおりです。

class	効果
img-fluid	画像をレスポンシブ対応にする
img-thumbnail	画像に境界線ができ、角に丸みをつける
rounded float-left	画像を左寄せにする
rounded float-right	画像を右寄せにする
rounded mx-auto b-block	画像を中央寄せにする