【簡単】Bootstrap5でレスポンシブデザインを実装！

本記事では、Bootstrapでレスポンシブデザインを作るための基礎を紹介します。

Contents

1 レスポンシブとは何か
2 Bootstrap の考え方
3 Bootstrapの導入方法
4 Bootstrapでレスポンシブを実装
- 4.1 breakpoints（ブレークポイント）とは
- 4.2 Bootstrapのclass属性の書き方
5 おわりに
6 参考図書

レスポンシブとは何か

レスポンシブデザインとは、あらゆるサイズのデバイスに合うようにwebサイトを設計することです。
パソコン、iPad、タブレットPC、スマホなど、色々なサイズのデバイスに合わせて、Webサイトの表示を変えます。
そのように設計するデザインを「レスポンシブデザイン」と呼びます。

Bootstrap の考え方

BootstrapというCSSフレームワークを使えば、レスポンシブデザインが簡単に実現できます。
例えば次のようなコードを記述したとしましょう。

<div class="col-12 col-md-6 col-xl-3">Hello World</div>

すると、このdiv要素は、スマホ（576px以下）の場合は横幅いっぱい、タブレット（576px以上）の場合は画面の半分の長さ、PC（1200px以上）の場合は、画面の4分の1サイズになります。

colとは、カラムのことです。col-md-6とは、「画面がmediumサイズ(576px以上)の時、カラムを６つ占有する」という意味です。

では、カラムとはなんでしょうか？

bootstrapのグリッド — bootstrapでは、画面は12個のカラムに分割されています

Bootstrapでは、どんな端末の画面も、12個のグリッドに分割されていると考えます。そのうち何個のカラムを使うのか、HTMLのタグの中のclass属性に記述します。

Bootstrapの導入方法

まず、導入方法を解説します。次のコードをHTMLファイルに張り付けてください。

<!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.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 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.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

おめでとうございます。Bootstrapの導入が完成しました。あとは<body></body>の中にHTMLを書いていくだけです。
これは、公式ドキュメントの「スターターテンプレート」をコピペしただけす。非常に簡単ですね。

公式ドキュメントはこちら

Bootstrapでレスポンシブを実装

実装する前にBootstrapのブレークポイントを理解する必要があります。画面幅を区別するにはブレークポイントというものが必要であり、それはピクセル値で表されます。

breakpoints（ブレークポイント）とは

画面の幅によってデザインを変えることをレスポンシブといいますが、その画面の幅の定義をブレークポイントといいます。
例えば、「スマホ」とひとえに言っても、色んな画面サイズがあります。ですので、実際にスマホ用の画面をデザインするときは、「画面幅が576px以下の場合」というように画面幅を定義する必要があります。

機種	画面幅
iPhone 12Pro	390px
iPad Pro 12.9	1024px

スマホとiPadの画面幅

例えば、390pxをブレークポイントとすれば、iPhone 12ProとiPad Pro 12.9を区別することができます。

Bootstrapでは、次のようなブレークポイントを区別できます。

Break Points	画面幅	class
X-Small	576px以下	定義しない
Small	576px以上	sm
Medium	768px以上	md
Large	992px以上	lg
Extra large	1200px以上	xl
Extra extra large	1400px以上	xxl

Bootstrapのブレークポイント

では、実際にHTMLのタグにどのようにクラスを付けてあげれば、レスポンシブデザインができるのか、見ていきましょう。

Bootstrapのclass属性の書き方

実装の手順は次の通りです。

全体を<div class=”container”></div>で囲む
さらに<div class=”row”></div>で囲む
レスポンシブさせたい要素に「col-」を含んだクラスを付与

例えば、ある2つの要素の配置を考えることにしましょう。この2つは、スマホでは縦に、パソコンでは横に半分ずつ表示させるとしたら、次のようなHTMLを書けばよいのです。

<div class="container">
    <div class="row">
        <div class="red col-12 col-md-6"></div>
        <div class="green col-12 col-md-6"></div>
    </div>
</div>

これをCSSで色と高さを指定して、ブラウザで表示すると、次のようになります。

まず、全体をcontainerクラスが付与された要素で囲み、次にrowクラスが付与された要素で囲みます。次に、レスポンシブに表示したい要素に対して「col-12 col-md-12」というクラスを付与してあげます。
「col-12」とは、「この要素は12個のカラムを使います」という意味であり、「col-md-12」とは「この要素は、画面幅がMedium以上の時、6個のカラムを使います」という意味になります。
「col-lg-6」とすれば、画面幅がLarge以上の時、6個のカラムを使う、となります。

このようにBootstrapでは、クラスを指定することで、様々な機能を使うことができます。

おわりに

Bootstrapは、概念さえわかれば非常に簡単です。その概念を一言で表すなら、
「classの値によって、デザインする」
です。

CSSを自分で書かなくても、色んな要素を作ることができます。例えば、次のようなカードを作りたいとします。

Bootstrapでできること — このようなカードをBootstrapでは簡単に実装できます

それには、次のようなHTMLを書く（実は公式ドキュメントからのコピペ）だけで、実装できます。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ご覧ください。いろんなクラスが付与されているでしょう！
こういったものは、サンプルとしてBootstrapの公式ドキュメントの中に大量に存在します。ですので、ぜひ一度ご自分でドキュメントの中を探索してみてください。

参考：Bootstrap公式ドキュメント日本語版