Bootstrap について

最初に

CSS のフレームワークである Bootstrap について、
業務でよく使う使い方を、例を挙げて解説します。

※class などの説明だけで、インストール方法は割愛します

Bootstrap とは？

Webサイトなどのユーザインタフェース（UI）を作る場合、
HTML だけでなく、
スタイルシート（以降 CSS＝Cascading Style Sheets）や、
Javascript が必要になります。

HTML だけでも作れますが、
動的なサイトや、見た目が奇麗なサイトを作りたい場合は、
CSS と Javascript が必要になります。

• 料理で例えるなら、CSSが 凝った食器、 Javascript が 調味料 でしょうか

ただ、これらを直接書くのはとても大変です。
なので、大抵の場合はフレームワーク※を利用します。

• ※1. 目的に応じたツールがあらかじめ用意されているセット。
  料理で例えるなら ミールキット でしょうか

Bootstrap は HTML、CSS、Javascript のフレームワークです。

• 以下、公式サイト
  https://getbootstrap.jp/

このページで話すこと

Bootstrap は特に意識しなくても、大体のレイアウトは自動的に変えてくれます。

また、div 要素などの class 属性に特定の値を定義することで、色や形状を変えることができます。

次項以降で、よく使う class の定義について簡素に説明します。

背景の色指定

ページの背景色だけでなく、ボタンの背景色、テーブルのセル色などを変える定義です。

bg-xxxx

• xxxx の値
  • 赤色: danger
  • 黄色: warning
  • 緑色: success
  • 水色: info
  • 青色: primary
  • 薄灰色: light
  • 灰色: secondary
  • 白色: white

例：

<div class="bg-danger">ここは危険</div>
<div class="bg-success">ここは安全</div>

1. 色指定は変数のようなものなので「ダークな背景にしたい」などのときにも、変数だけ変えればサクッと実現可能
2. 場面に応じて色の表現を意識して使うと、より効果的です
   例：
   • 赤は重要な操作
   • 緑は結果、安全な操作
   • 水色は情報
   • 灰色は無効　など

文字の色指定

文字の色を変える定義です。

text-xxxx

• xxxx の値は bg とほぼ同じ

テーブル

Excel のようなしっかりとしたレイアウトや、モダンな行形式を表現できます。

• table: テーブルのレイアウト全体が変わります（必ず指定）
• table-hover: 選択した列の色が反転します（今どこを選択しているかを視覚的に）
• table-striped: 一列ごとに交互に色が変わります（見やすさ重視の場合）
• table-responsive: レスポンシブになります（画面を小さくすると形状が変わる）
• compact: テーブルの余白が減ります（Excelのように情報量が多いテーブルに）

例：

<table class="table table-hover table-striped table-responsive">

サンプル画像

カード

Bootstrap4 以降でよく使うレイアウトです。

丸みのある四角いボックス内に、ヘッダ、ボディ、フッタの内容を記載できます。

カードの入れ子もできるので、Word などのボックス型レイアウトを再現できます。

例：

<div class="card">
  <div class="card-header bg-info">
    これがヘッダ
    ページのタイトルや、注意書きなどを書く
    基本一行で
  </div>
  <div class="card-body">
    ここが本文
    コンテンツはここに書く
  </div>
  <div class="card-footer bg-light">
    フッタ
    あまり使わない
    参考情報などを書くときに
  </div>
</div>

サンプル画像

余白指定

CSS には padding や margin といった余白指定がありますが、Bootstrap4 以降ではこれを class で指定できます。

例： padding の場合

• pr-4 は 右側(right) の padding を大きめに取る
  • pl は左側、pt は上、pb は下
  • -数字 は余白のサイズ （1 - 5）
• p-2 は 上下左右 の padding を少な目に取る
• py は上下、px は左右の padding をまとめて指定できる

例： margin の場合

• 基本的には padding の場合と同じ使い方
• こちらは要素の外側の余白を取る
• 端的に言うと、テーブルの中の余白か、外の余白か、の違い

レスポンシブ設計

少し難しいので、慣れないうちは意識しなくて良いと思います。

Bootstrap は特に意識しなくても、自動的に画面サイズに応じてレイアウトを変えてくれるためです。

ただ、ページによっては、
「レイアウトを意図した形で維持したい」という場合があると思います。

この場合に使うのが row と col-xxxx col-md-xxxx などのクラス。

例： 以下の例の場合、フォームのスタイルを 4対8（名前4 [textフォーム]8）で維持してくれます。

<div class="row">
  <div class="col-4">名前: </div>
  <div class="col-8">[textフォーム]</div>
</div>

サンプル画像

例： 以下の例の場合、画面が小さくなると、要素が縦並びになります。

<div class="row">
  <div class="col-12 col-md-4">名前: </div>
  <div class="col-12 col-md-8">[textフォーム]</div>
</div>

※col-12 で縦並び。 col-md-xxxx で画面サイズ中程度の場合に横並びにします

サンプル画像