Zenn
📘

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

2024/10/10に公開
Bootstrap
CSS
cssフレームワーク
tech

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

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

まずはこちらの2枚の画像をご覧ください。
素のままのCSS
CSSフレームワーク
CSSフレームワークは、
クラス名と、それに対応するスタイルがすでに用意されています。

ひとつ例を挙げると「text-center」というクラスをつけたらそれだけで文字は中央に寄ります。
普段はCSSファイルにtext-align: center;と記述しますが、すでにそれぞれのクラスにCSSが設定されているものをまとめたファイルがあり、それを読み込むことによって同じ効果を得ています。

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

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

Bootstrapを知ろう

https://getbootstrap.com/
「Bootstrap」とは、旧Twitter社によって開発され、世界中のWeb開発現場で最も多く利用されているCSSフレームワークです。
主要CSSフレームワークの使用率推移
「State of CSS 2023」より

主な特徴

  1. ユーティリティクラス
    ... 余白や表示方法など、細かなスタイル調整が可能なクラスを提供しています。
  2. 豊富なUIコンポーネント
    ... ボタン、モーダル、フォーム要素など、一般的なUIを構成するコンポーネントが揃っています。
  3. レスポンシブデザイン
    ... モバイルファーストの設計で、「グリッドシステム」を用いて様々なデバイスに対応したデザインが簡単に実現できます。
     

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

 

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

CSSプロパティとBootstrapのユーティリティクラス名は1対1で対応しています。

text-align: center; だったら text-center というように、そのクラス名の表すスタイルが予測できるようになっています。

この原則のもと、できるだけわかりやすいクラス名となるようにいくつかの仕組みがあるため、それを1つずつ確認していきましょう。

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

Bootstrap Theme colors
赤、青、そんな名前ではなく、危険な時に使って欲しい色に「Danger」、成功・正解を示したいときに「Success」など、用途によって色が割り当てられています。
削除ボタンなら「btn-danger」のようにクラスを当てます。

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

  1. 単語は丸ごと省略する（完全に取り除く）ことがある
    • justify-content: space-between; → justify-content-between
    • text-align: center; → text-center
  2. プロパティの頭文字を取って短縮する（形を変え短くする）ことがある
    • display: flex; → d-flex
    • background-color: **; → bg-**（**には①で扱ったような色が入ります）
    • margin: 0px; → m-0
  3. そのまま
    • これ以上短くすると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）
例：
<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）
例：
<h1 class="fs-1">見出しのフォントサイズ（37px）</h1>

 

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

Bootstrapには、Webサイトやアプリケーションで頻繁に使用されるUIコンポーネントが豊富に用意されています。これらを活用することで、質の高いデザインを効率的に実装できます。
ここでは使用頻度の高い「ボタン」「モーダル」「入力フィールド」について紹介します。

① ボタン（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つの要素が必要です。

  1. モーダルを起動するトリガー（ボタンなど）
  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>
ポイント
  1. モーダルを起動するトリガーについて
    • data-bs-toggle="modal"：クリック時にモーダルを表示するための属性。
    • data-bs-target="#exampleModal"：表示するモーダルのidを指定。
  2. モーダルの本体について
    • 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方式）

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

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

  • デスクトップや適当なディレクトリでbootstrap-tutorialディレクトリを作成してください。
    ディレクトリの作成
  • VSCodeでbootstrap-tutorialを開きましょう。
  • これ以降このbootstrap-tutorialディレクトリをプロジェクトディレクトリと呼びます。

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

  1. プロジェクトディレクトリでindex.htmlを作成
    index.htmlファイルの作成
  2. HTMLの雛形を作成
    「!（エクスクラメーションマーク）」を入力すると、一瞬でHTMLの雛型が作成できます。
    HTMLの雛形作成
    HTMLの雛形完成

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

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

https://getbootstrap.com/

  1. 公式ドキュメントにアクセス
    公式ドキュメント
  2. コードをコピー
    • Bootstrapを使用する場合、CSS、JavaScriptの2つのCDNが必要となります。（JavaScriptはモーダルの開閉などの処理を担当するため）
    • 公式ドキュメントの「Include via CDN（CDN経由でインクルードする）」からコードをコピーします。
      Get started
    • index.htmlの<head>タグ内に記述しましょう。
      cdn貼り付け済み

さあ、ここまででBootstrapを使用する準備は万端です。実際にユーティリティクラスを試してみるのもいいですね！
続いて、より開発を便利にするための便利ツールを紹介していきます。
 

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

「実際に開発で使っていくとなると覚えないといけないのかな…？」
そうハードルが高く感じている人も多いのではないでしょうか？
実は、VSCodeの拡張機能として、クラス名を途中まで入力すると予測して候補を表示してくれる補完機能があります。
それが「Bootstrap IntelliSense（ブートストラップ インテリセンス）」です。

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

VSCode拡張機能

  1. 画面左側、アクティビティバーから「拡張機能」タブを選択
  2. 検索欄にbootstrap intellisenseと入力
  3. 「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ファイルへ貼り付けましょう。
    Iconsの導入

アイコンの使い方

  • 例えば、「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のカラム（列）に分割し、レスポンシブなデザインを簡単に構築するための仕組みです。

基本構造

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

  • 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も簡単に構築できます。

これからは、公式ドキュメントを参照しながら、他のコンポーネント（ナビゲーションバー、カード、アラートなど）も試してみてください。実際に手を動かしてコードを書いてみることで、より深く理解できるでしょう。

Discussion