Webデザイン初心者でも簡単に使える！Bootstrap4基本の使い方【入門編】

Bootstrap

Webデザイン初心者でも簡単に使える！Bootstrap4基本の使い方【入門編】

2018年12月07日 8:00　2019年09月06日

Webデザイン初心者でも簡単に使える！Bootstrap4基本の使い方【入門編】

おはようございます！社員Aです👩

今回は、WEBデザイン初心者でも簡単に使えるBootstrap4の使い方をご紹介します。

これから、複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していければと思っているので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

今回はまず最初ということで、入門編からスタートです！

Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか？

Bootstrap4基本の使い方シリーズ

Bootstrap4基本の使い方【入門編】 Bootstrap4基本の使い方【ボタン編】 Bootstrap4基本の使い方【アラート編】 Bootstrap4基本の使い方【文字の装飾編】 Bootstrap4基本の使い方【表示・非表示編】 Bootstrap4基本の使い方【バッジ編】 Bootstrap4基本の使い方【ページ送り編】 Bootstrap4基本の使い方【パンくずリスト編】 Bootstrap4基本の使い方【イメージ編】

Bootstrapとは？
- Bootstrapを使うメリット
Bootstrapを使うための準備
- Bootstrapのファイルをダウンロード or CDNを使用する
Bootstrapを動かしてみる（グリッドレイアウト編）
- 1.グリッドレイアウトのルール
- 2.デバイス別のクラス付与について
Bootstrapを動かしてみる（テーブル編）
まとめ

Bootstrapとは？

まず、そもそもBootstrap（ブートストラップ）って何？というところからですね。

私は初めてBootstrapを耳にした時、ビリーズブートキャンプを連想しました（笑）黒人が踊るやつですね。

Bootstrapは最も有名なCSSフレームワークで、モバイルファースト・レスポンシブデザインで開発されています。

CSSフレームワークと聞くと難しいですが、例えば、「2カラムのグリッドレイアウトを作りたい時」「見栄えの良いテーブルを作りたい時」1からCSSを記述しなくても、あらかじめBootstrapを読み込んでおけば、HTMLに対してクラスを付与するだけで、誰でもそれなりの見栄えのサイトを作ることが出来ます。

Bootstrapを使うメリット

弊社でもWEB制作の際は基本的にBootstrapを使って制作をさせていただいているのですが、Bootstrapを使用するメリットがあります。

例えば、下記です。

レスポンシブWebデザインに対応している
最近のデザインを取り入れることができる
ボタンやフォームなどUI周りのパーツが予め用意されているので、コーディングの時間短縮になる
デザインが出来ない人でもキレイなWebページを簡単に作ることが出来る

Bootstrapをある程度使いこなせるようになれば、1からコーディングするよりもかなり時短になることは間違いないです。

Bootstrapを使うための準備

まずは、Bootstrapを使うための「前準備」を説明します。

もし、「もうBootstrapを使う準備が出来ているよ」という方は、次の項目から読んでいただければと思います！

Bootstrapのファイルをダウンロード or CDNを使用する

まずは、サイトにBootstrapを導入する必用がありますが、導入する方法が2種類あります。

ファイルをダウンロードして、サイトに読み込む
CDNを使って読み込む

まずどちらの方法も、公式サイトから「Download」をクリックします。

ダウンロードページへ移動しますので、②のCDNを使って読み込む場合は、「BootstrapCND」からコピーして<head></head>に貼り付けましょう。

①の「ファイルをダウンロードして、サイトに読み込む」場合は、下記からファイルをダウンロードしてください。

こちらには、Bootstrap最新版ののCSSとJSが含まれています。

こちらも、ダウンロードしたら<head></head>内に記述します。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

注意点bootstrapのjsは、必ずjquery本体の後に記述しましょう。jquery本体の前に記述してしまったり、jquery本体がないと作動しません。

Bootstrapを動かしてみる（グリッドレイアウト編）

Bootstrapを使う準備が出来たら、早速使ってみましょう。

まずは、一番基礎的な画面を縦横で分断した方眼のブロックを組み合わせてコンテンツを組み合わせていく「グリッドレイアウト」を使います。

この「グリッドレイアウト」を覚えることで、パソコンやスマートフォンなどデバイスに応じたレイアウトを作成することができます。

1.グリッドレイアウトのルール

グリッドレイアウトのルールを見てみましょう。

コンテナ（大枠）は、デバイスサイズにわたって固定幅の「 .container」または全幅の「 .container-fluid」（width: 100%）を使用します。
行「row」が列「column」を囲みます。
.col(-{breakpoint})-*でcolumnの幅がきまります。
③の* は1行につき合計が12になるように指定します。

ぱっと見るとものすごく難しく感じますが、下記のソース例を使ってみましょう。

<div class="container"><!-- コンテナ（大枠） -->
  <div class="row"><!-- 1行 -->
    <div class="col-sm"><!- column -->
      3つの列の1列目
    </div>
    <div class="col-sm"><!- column -->
      3つの列の2列目
    </div>
    <div class="col-sm"><!- column -->
      3つの列の3列目
    </div>
  </div>
</div>

上記のHTMLを打ち込むと、下記のようなグリッドレイアウトが完成します。

（わかりやすいよう、背景色をつけています）

2.デバイス別のクラス付与について

例えば、PC画面（1200px以上のモニター）で見た時は3列に並べたいけど、スマホで見た時は1行ずつにしたいといった時は、画面サイズごとのクラス付与が必要です。

先程のHTML例で「col-sm」とクラス付与していた部分を、画面サイズごとに指定します。

デバイスの幅	極小縦モバイルサイズ <576px	小横モバイルサイズ ≥576px	中タブレットサイズ ≥768px	大デスクトップサイズ ≥992px	特大大画面サイズ ≥1200px
コンテナの最大幅	なし（自動）	540px	720px	960px	1140px
クラス名	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`

Bootstrapを動かしてみる（テーブル編）

次に、よく使うテーブルの使いかたを紹介します。

テーブルと言えば簡単に作れるイメージがありますが、Bootstrapの機能を使えば一瞬で見やすいテーブルレイアウトを作成できます。

1.テーブルのルール

先程のグリッドレイアウト同様に、containerもしくはcontainer-fluidの中にテーブルを作成しましょう。

class=”container”の中にテーブルを作成
<table> に基本クラスの .table を追加

2.標準のテーブルを作る

一番基本的なテーブルの作り方は、<table>要素に対してクラス「.table」を付与するだけです。

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
      </tr>
    </tbody>
  </table>
</div>

3.暗めのテーブルを作る

<table>要素に対してクラス「.table」「.table-dark」を付与すると、ダークモードのテーブルを作ることができます。

<div class="container">
  <table class="table table-dark">
    <thead>
      <tr>
        <th>#</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
      </tr>
    </tbody>
  </table>
</div>

4.交互に行の色が変わるテーブルを作る

<table>要素に対してクラス「.table」「.table-striped」を付与すると、交互に行の色が変わるテーブルを作ることができます。

デフォルトのテーブルよりもメリハリがついて見やすいですね。

<div class="container">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
      </tr>
    </tbody>
  </table>
</div>

5.縦線が入ったテーブルを作る

<table>要素に対してクラス「.table」「.table-bordered」を付与すると、縦線が入ったテーブルを作ることができます。

<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
      </tr>
    </tbody>
  </table>
</div>

6.罫線のないテーブルを作る

<table>要素に対してクラス「.table」「.table-borderless」を付与すると、罫線のないテーブルを作ることができます。

<div class="container">
  <table class="table table-borderless">
    <thead>
      <tr>
        <th>#</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
      </tr>
    </tbody>
  </table>
</div>

7.マウスオーバーで行の背景色がホバー表示するテーブルを作る

<table>要素に対してクラス「.table」「.table-hover」を付与すると、マウスオーバーで行の背景色がホバー表示するテーブルを作ることができます。

<div class="container">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
      </tr>
    </tbody>
  </table>
</div>

8.行間が狭いテーブルを作る

<table>要素に対してクラス「.table」「.table-sm」を付与すると、行間が狭いテーブルを作ることができます。

<div class="container">
  <table class="table table-sm">
    <thead>
      <tr>
        <th>#</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
        <th scope="col">見出し</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
        <td>テーブルのセル</td>
      </tr>
    </tbody>
  </table>
</div>

9.テーブルの背景色を変えてみる

背景色クラスを使用して、表の行やセルの背景色を簡単に変えられます。

タイプ	クラス名	見出し	見出し
Active	`.table-active`	テーブルのセル	テーブルのセル
Primary	`.table-primary`	テーブルのセル	テーブルのセル
Secondary	`.table-secondary`	テーブルのセル	テーブルのセル
Success	`.table-success`	テーブルのセル	テーブルのセル
Info	`.table-info`	テーブルのセル	テーブルのセル
Warning	`.table-warning`	テーブルのセル	テーブルのセル
Danger	`.table-danger`	テーブルのセル	テーブルのセル
Light	`.table-light`	テーブルのセル	テーブルのセル
Dark	`.table-dark`	テーブルのセル	テーブルのセル