📘

CSSフレームワーク「Bootstrap」超入門

2024/10/10に公開

Bootstrap

CSS

cssフレームワーク

tech

!
 この記事の対象者Webサイト／アプリケーション開発を学び始めて「Bootstrap」と出会ったあなたへ向けて

 

 概要CSSフレームワークとこれまでに学んだCSSとの違い
"Bootstrap"の二大構成要素「ユーティリティクラス」と「コンポーネント」の仕組みを徹底解説
"Bootstrap"を使い始めるための手順
VSCodeの補完機能とチートシート
アイコンフォント"Bootstrap Icons"
レスポンシブ（Breakpoints, Containers, Grid System）

 普通のCSS vs CSSフレームワーク
 これまでのHTML/CSSのコーディングと比較して、CSSフレームワークはどのように開発を便利にしてくれるのでしょうか？まずはこちらの2枚の画像をご覧ください。





CSSフレームワークは、

クラス名と、それに対応するスタイルがすでに用意されています。
ひとつ例を挙げると「text-center」というクラスをつけたらそれだけで文字は中央に寄ります。

普段はCSSファイルにtext-align: center;と記述しますが、すでにそれぞれのクラスにCSSが設定されているものをまとめたファイルがあり、それを読み込むことによって同じ効果を得ています。

 つまり、クラス名を考えなくてOK最大のメリットの一つに「クラス名を考える手間からの解放」が挙げられます。

他にもカラーや余白、フォントサイズが定型化されていてデザインのルールが敷かれた上で開発できる点、記事後半で扱うレスポンシブ対応のしやすさなどありますが、この工数削減はある程度経験がある人も初心者でも実感しやすいメリットです。

 

 Bootstrapを知ろうhttps://getbootstrap.com/

「Bootstrap」とは、旧Twitter社によって開発され、世界中のWeb開発現場で最も多く利用されているCSSフレームワークです。



「State of CSS 2023」より

 主な特徴
ユーティリティクラス

... 余白や表示方法など、細かなスタイル調整が可能なクラスを提供しています。

豊富なUIコンポーネント

... ボタン、モーダル、フォーム要素など、一般的なUIを構成するコンポーネントが揃っています。

レスポンシブデザイン

... モバイルファーストの設計で、「グリッドシステム」を用いて様々なデバイスに対応したデザインが簡単に実現できます。

 
この、「ユーティリティクラス」と「UIコンポーネント」の2つをどちらも有しているという点に注意が必要です。これをしっかり頭の中で分けて考えることによってBootstrapマスターへの道へとつながります。
!

 ユーティリティクラス


text-centerというクラスを指定すると、テキストを中央に揃えるためのCSSプロパティ（text-align: center;）が適用されるというように、1対1でCSSプロパティが紐づけられています。
クラス名を指定することでスタイルを当てます。

 


 UIコンポーネント

それに対して、btnというクラスを指定すると、ボタンの色、サイズ、フォントの大きさ・配置、ホバーアニメーションなどが設定されたボタンが完成するというように、質の高いUIを簡単に実装することができます。
コンポーネントはその名の通り"かたまり"です。HTMLのタグの構造ごとまとめてコピー&ペーストして使います。

!
 （ご案内）Boostrapのプロジェクトへの導入方法を早く知りたい方へBootstrapを使う際の考え方や、実例についての話がここから続きますので、導入方法が気になる方は Bootstrapの導入方法（CDN方式） までスキップしてください。
 

 Bootstrapの「ユーティリティクラス」基本の仕組みCSSプロパティとBootstrapのユーティリティクラス名は1対1で対応しています。
text-align: center; だったら text-center というように、そのクラス名の表すスタイルが予測できるようになっています。
この原則のもと、できるだけわかりやすいクラス名となるようにいくつかの仕組みがあるため、それを1つずつ確認していきましょう。

 ① 色は「用途」で名付けられている

赤、青、そんな名前ではなく、危険な時に使って欲しい色に「Danger」、成功・正解を示したいときに「Success」など、用途によって色が割り当てられています。

削除ボタンなら「btn-danger」のようにクラスを当てます。

 ② CSSプロパティの単語が省略・短縮されている
単語は丸ごと省略する（完全に取り除く）ことがある

justify-content: space-between; → justify-content-between

text-align: center; → text-center


プロパティの頭文字を取って短縮する（形を変え短くする）ことがある

display: flex; → d-flex

background-color: **; → bg-**（**には①で扱ったような色が入ります）

margin: 0px; → m-0


そのまま
これ以上短くするとCSSプロパティを判別できない場合、全くそのままのクラス名となります。

overflow: hidden; → overflow-hidden

justify-content: center; → justify-content-center


 ③ 余白の構造要素の余白に関するクラス名は以下のような構造になっています。
{プロパティ}{方向}-{サイズ}

 プロパティ
m：マージン（margin）

p：パディング（padding）

 方向
t：上（top）

b：下（bottom）

s：左（start）

e：右（end）

x：左右（leftとright）

y：上下（topとbottom）

なし：全方向

 サイズ
0：0rem（0px）

1：0.25rem（4px）

2：0.5rem（8px）

3：1rem（16px）

4：1.5rem（24px）

5：3rem（48px）

auto：自動（auto）
!
 補足：「rem（レム）」<html>タグに指定されているフォントサイズ（特に指定がない場合は「16px」）を root（ルート）要素、すなわち基準のフォントサイズとして、その何倍かで表す「rem（レム）」という単位を用います。
 例：
<div class="mt-3">上マージンを1rem（16px）追加</div>
<div class="px-2">左右パディングを0.5rem（8px）追加</div>
<div class="m-0">全方向のマージンを0に設定</div>

 ④ フォントサイズクラス名は以下のような構造になっています。
fs-{サイズ}

 サイズ
1：font-size: calc(1.375rem + 1.5vw);（画面幅1000pxのとき37px）

2：font-size: calc(1.325rem + .9vw);（画面幅1000pxのとき30.2px）

3：font-size: calc(1.3rem + .6vw);（画面幅1000pxのとき26.8px）

4：font-size: calc(1.275rem + .3vw);（画面幅1000pxのとき23.4px）

5：font-size: 1.25rem;（20px）

6：font-size: 1rem;（16px）
!
 補足：「vw（Viewport Width / ビューポートウィズ）」vw とは、Viewportすなわち画面の幅の「1/100」の大きさを持った単位です。つまり、画面幅が1000pxなら1vwは10pxになります。

絶対値ではなく画面の幅によって変動する相対値であるということがポイントです。
 例：
<h1 class="fs-1">見出しのフォントサイズ（37px）</h1>
!
 この対応する数字は覚える必要なし！ここまで余白やフォントサイズなどについてのBootstrapユーティリティクラスに触れてきましたが、絶対に覚えようとしないでください。

VSCodeの拡張機能として、クラス名を途中まで入力すると予測して候補を表示してくれる補完機能があります。

VSCode拡張機能でクラス名の候補を出す（Bootstrap IntelliSense）で扱いますので、楽しみにしていてください。
 

 Bootstrapの主要な「UIコンポーネント」Bootstrapには、Webサイトやアプリケーションで頻繁に使用されるUIコンポーネントが豊富に用意されています。これらを活用することで、質の高いデザインを効率的に実装できます。

ここでは使用頻度の高い「ボタン」「モーダル」「入力フィールド」について紹介します。
!
 ユーティリティクラスとここが違う！ユーティリティクラスはクラス名のみを1つ1つ設定していましたが、コンポーネントはその名の通り"かたまり"です。HTMLのタグの構造ごとまとめてコピー&ペーストして使いましょう。

 ① ボタン（Button）https://getbootstrap.com/docs/5.3/components/buttons/

 バリエーション
<button type="button" class="btn btn-primary">ボタン</button>
ポイント
btn：すべてのボタンに共通する基本のスタイルを適用します。

btn-**（色名）：ボタンの色を指定します。色名は用途に応じた名前になっています。

 サイズや形状<button type="button" class="btn btn-primary btn-lg">大きなボタン</button>
<button type="button" class="btn btn-secondary btn-sm">小さなボタン</button></button>
<button type="button" class="btn btn-outline-primary">アウトラインボタン</button>

 ② モーダル（Modal）モーダルは、画面全体に重ねて表示されるポップアップウィンドウです。重要なメッセージや確認をユーザーに提示したり、登録用のフォームを表示したりする際に使用します。
https://getbootstrap.com/docs/5.3/components/modal/

 基本的な構造モーダルを使用するためには、以下の2つの要素が必要です。

モーダルを起動するトリガー（ボタンなど）
モーダルの本体
<!-- モーダルを開くボタン -->
<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 fs-5" id="exampleModalLabel">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        モーダルの内容がここに入ります。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存する</button>
      </div>
    </div>
  </div>
</div>
ポイント
モーダルを起動するトリガーについて

data-bs-toggle="modal"：クリック時にモーダルを表示するための属性。

data-bs-target="#exampleModal"：表示するモーダルのidを指定。


モーダルの本体について

id="exampleModal"：トリガーのdata-bs-target属性に設定することで開閉できるように紐づく。


 ③ 入力フィールド（Input）フォームの入力フィールドは、ユーザーから情報を取得する際に使用します。Bootstrapを使うことで、シンプルで見やすい入力フォームを作成できます。
https://getbootstrap.com/docs/5.3/forms/form-control/
 入力フィールドの例
<form>
  <div class="mb-3">
    <label for="email" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">パスワード</label>
    <input type="password" class="form-control" id="password" placeholder="パスワードを入力">
  </div>
  <div class="mb-3">
    <label for="message" class="form-label">メッセージ</label>
    <textarea class="form-control" id="message" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

 Input Group（インプットグループ）https://getbootstrap.com/docs/5.3/forms/input-group/

入力フィールドのすぐ横にテキスト、ボタンなどを追加することで、フォームを簡単に拡張することができます。

 

 Bootstrapの導入方法（CDN方式）!

 導入方法


CDN方式でファイルを読み込む
npm (Node.js) の環境でファイルを直接インストールする

Bootstrapの使い方は上記2種類の使い方があります。

今回は、最も簡単な「CDN方式」でファイルを読み込んでいきます。もしReactなどnpm環境で開発を行っている場合は後者を採用しましょう。

 ① プロジェクトディレクトリを作成デスクトップや適当なディレクトリでbootstrap-tutorialディレクトリを作成してください。


VSCodeでbootstrap-tutorialを開きましょう。
これ以降このbootstrap-tutorialディレクトリをプロジェクトディレクトリと呼びます。

 ② HTMLファイルを作成し、雛形を作成する
プロジェクトディレクトリでindex.htmlを作成



HTMLの雛形を作成

「!（エクスクラメーションマーク）」を入力すると、一瞬でHTMLの雛型が作成できます。





 ③ CDN方式でファイルを読み込むCDNとは、「コンテンツ・デリバリー・ネットワーク」の略語です。
ここでは「必要なファイルを外部のサイトから読み込む」イメージを持っていただければ大丈夫です。
https://getbootstrap.com/

公式ドキュメントにアクセス



コードをコピー
Bootstrapを使用する場合、CSS、JavaScriptの2つのCDNが必要となります。（JavaScriptはモーダルの開閉などの処理を担当するため）
公式ドキュメントの「Include via CDN（CDN経由でインクルードする）」からコードをコピーします。



index.htmlの<head>タグ内に記述しましょう。



さあ、ここまででBootstrapを使用する準備は万端です。実際にユーティリティクラスを試してみるのもいいですね！

続いて、より開発を便利にするための便利ツールを紹介していきます。

 

 VSCode拡張機能でクラス名の候補を出す（Bootstrap IntelliSense）「実際に開発で使っていくとなると覚えないといけないのかな…？」

そうハードルが高く感じている人も多いのではないでしょうか？

実は、VSCodeの拡張機能として、クラス名を途中まで入力すると予測して候補を表示してくれる補完機能があります。

それが「Bootstrap IntelliSense（ブートストラップ インテリセンス）」です。

 VSCode拡張機能を検索し、インストール
画面左側、アクティビティバーから「拡張機能」タブを選択
検索欄にbootstrap intellisenseと入力
「Bootstrap IntelliSense」をインストール
<head>タグ内にBootstrapのCDNリンクが読み込まれていることで機能が有効になります。
https://marketplace.visualstudio.com/items?itemName=hossaini.bootstrap-intellisense

 

 チートシートを使ってクラス名を素早く検索公式ドキュメントには細かい使い方やdemoも載っておりわかりやすいのですが、実際にスタイルを当てていくとなると「毎回検索を行ってページの中で探して…」というのは手間がかかってしまいます。
そこで役立つのが「チートシート」です。
元のCSSプロパティでもBootstrapのクラス名でもどちらでも検索が可能です。実際のスタイリングに特化している便利ツールと言えます。

https://bootstrap-cheatsheet.themeselection.com/

 

 補足：アイコンフォント"Bootstrap Icons"を活用するBootstrapは便利なアイコンの素材も提供しています。

https://icons.getbootstrap.com/

 導入方法（CDN方式）「Install」のリンクにアクセスするとCDNのURLが配置してありますので、Bootstrapと同様にHTMLファイルへ貼り付けましょう。



 アイコンの使い方例えば、「right」と検索すると右方向の矢印などが表示されます。使いたいアイコンをクリックしてみましょう。


そうすると個別のページに遷移しますので、「Icon Font」からタグをコピーし、貼り付けましょう。



 

 補足：レスポンシブ（Breakpoints, Containers, Grid System）Webサイト／アプリケーションを構築する上で、様々な画面サイズに対応することは非常に重要です。レスポンシブデザインを容易に実現するためにBootstrapが提供している「ブレークポイント」「コンテナ」「グリッドシステム」について解説していきます。

 ① ブレークポイント（Breakpoints）ブレークポイントとは、画面幅に応じてレイアウトを変更するための基準となるポイントです。Bootstrapでは、一般的なデバイスサイズに合わせたブレークポイントが定義されています。


ブレークポイント
クラス名の接頭辞
画面幅
用途例


xs
（なし）
~575px
携帯電話

sm
sm
576px 以上
小型タブレット

md
md
768px 以上
タブレット

lg
lg
992px 以上
ノートPC

xl
xl
1200px 以上
デスクトップPC

xxl
xxl
1400px 以上
大型デスクトップ

これらのブレークポイントを利用して、画面サイズに応じたスタイルを適用することができます。

 クラス名でのブレークポイントの使用例ユーティリティクラスやグリッドシステムで、ブレークポイントに応じてスタイルを変化させる際にクラス名の接頭辞として使用します。
<!-- 例：小さい画面では非表示、大きい画面では表示 -->
<div class="d-none d-md-block">
  このコンテンツは768px以上の画面で表示されます。
</div>

 ② コンテナ（Containers）コンテンツを適切に配置するための基本的な要素です。Bootstrapでは、コンテナを使ってページの左右の余白を自動的に調整し、コンテンツを中央に配置します。

 コンテナの種類
container

... 固定幅のコンテナ。ブレークポイントに応じて最大幅が変わります。

container-fluid

... 幅100%のフル幅コンテナ。常に画面幅いっぱいに広がります。

container-{breakpoint}

... 指定したブレークポイント以上で固定幅、それ未満で幅100%になります。
<!-- 固定幅のコンテナ -->
<div class="container">
  <!-- コンテンツ -->
</div>

<!-- フル幅のコンテナ -->
<div class="container-fluid">
  <!-- コンテンツ -->
</div>

<!-- 中画面以上で固定幅になるコンテナ -->
<div class="container-md">
  <!-- コンテンツ -->
</div>

 ③ グリッドシステム（Grid System）Bootstrapのグリッドシステムは、ページレイアウトを12のカラム（列）に分割し、レスポンシブなデザインを簡単に構築するための仕組みです。
!
 row（行）とcolumn（列）は、「スシロー」で覚える！回転寿司チェーン店「スシロー」のロゴ、横書きですよね？ つまり横一列が「スシロー（row）」。そして、スシローが扱っているのはもちろん「魚（ぎょ）」ということで「行（ぎょう）」。
一方、縦一列のロゴがあったとしたら「スシカラム（column）」と書きましょう。「それはもうスシローじゃない！」ってツッコミが聞こえてきそうですね。行列の行じゃない方なので、カラムは「列」。
こじつけではありますが、暗記するならこんな感じです！ もちろんその都度調べてもOKです👍

 基本構造グリッドシステムは主に以下の要素で構成されます。

container ... グリッドを包む親要素。

row ... 行を定義し、カラムを水平方向に並べます。

col ... カラムを定義します。
<div class="container">
  <div class="row">
    <div class="col">
      カラム1
    </div>
    <div class="col">
      カラム2
    </div>
    <div class="col">
      カラム3
    </div>
  </div>
</div>

 カラム幅の調整各カラムの幅は、colクラスに番号を付けることで指定できます。番号は1から12までで、合計が12になるようにします。
 画面幅が十分にある場合のカラムの幅の指定例
<div class="row">
  <div class="col-9">
    幅9/12のカラム <!-- 画面全体の75% -->
  </div>
  <div class="col-3">
    幅3/12のカラム <!-- 画面全体の25% -->
  </div>
</div>
ポイント
colクラスのみの場合、カラムは自動的に均等幅になります。

col-の後に数字を付けると、特定の幅を指定できます。

 レスポンシブなグリッドブレークポイントを使用して、画面サイズに応じてカラムの幅を変えることができます。
 768pxまでは2×2、768px以上では4×1のグリッド
<div class="row">
  <div class="col-6 col-md-3">
    小さな画面では幅6/12、768px以上では幅3/12のカラム
  </div>
  <div class="col-6 col-md-3">
    小さな画面では幅6/12、768px以上では幅3/12のカラム
  </div>
  <div class="col-6 col-md-3">
    小さな画面では幅6/12、768px以上では幅3/12のカラム
  </div>
  <div class="col-6 col-md-3">
    小さな画面では幅6/12、768px以上では幅3/12のカラム
  </div>
</div>
グリッドレイアウトについてはこちらの記事もおすすめです。

https://skillhub.jp/courses/168/lessons/915

 

 あとがきBootstrapを構成する「ユーティリティクラス」と「UIコンポーネント」を理解することで、効率的かつ統一感のあるWebデザインの実現に近づきます。特に、コンポーネントを組み合わせることで、複雑なUIも簡単に構築できます。
これからは、公式ドキュメントを参照しながら、他のコンポーネント（ナビゲーションバー、カード、アラートなど）も試してみてください。実際に手を動かしてコードを書いてみることで、より深く理解できるでしょう。

ブレークポイント	クラス名の接頭辞	画面幅	用途例
xs	（なし）	~575px	携帯電話
sm	`sm`	576px 以上	小型タブレット
md	`md`	768px 以上	タブレット
lg	`lg`	992px 以上	ノートPC
xl	`xl`	1200px 以上	デスクトップPC
xxl	`xxl`	1400px 以上	大型デスクトップ

普通のCSS vs CSSフレームワーク

これまでのHTML/CSSのコーディングと比較して、CSSフレームワークはどのように開発を便利にしてくれるのでしょうか？

つまり、クラス名を考えなくてOK

Bootstrapを知ろう

主な特徴

Bootstrapの「ユーティリティクラス」基本の仕組み

① 色は「用途」で名付けられている

② CSSプロパティの単語が省略・短縮されている

③ 余白の構造

プロパティ

方向

サイズ

④ フォントサイズ

サイズ

Bootstrapの主要な「UIコンポーネント」

① ボタン（Button）

バリエーション

ポイント

サイズや形状

② モーダル（Modal）

基本的な構造

ポイント

③ 入力フィールド（Input）

Input Group（インプットグループ）

Bootstrapの導入方法（CDN方式）

① プロジェクトディレクトリを作成

② HTMLファイルを作成し、雛形を作成する

③ CDN方式でファイルを読み込む

VSCode拡張機能でクラス名の候補を出す（Bootstrap IntelliSense）

VSCode拡張機能を検索し、インストール

チートシートを使ってクラス名を素早く検索

補足：アイコンフォント"Bootstrap Icons"を活用する

導入方法（CDN方式）

アイコンの使い方

補足：レスポンシブ（Breakpoints, Containers, Grid System）

① ブレークポイント（Breakpoints）

クラス名でのブレークポイントの使用例

② コンテナ（Containers）

コンテナの種類

③ グリッドシステム（Grid System）

基本構造

カラム幅の調整

ポイント

レスポンシブなグリッド

あとがき

Discussion