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

bootstrap_responsive

スポンサーリンク

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

レスポンシブとは何か

レスポンシブデザインとは、あらゆるサイズのデバイスに合うように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以上)の時、カラムを6つ占有する」という意味です。

スポンサーリンク

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

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で色と高さを指定して、ブラウザで表示すると、次のようになります。

Bootstrapでレスポンシブデザイン
画面幅が小さいとき
Bootstrapのレスポンシブデザイン
画面幅がMedium以上の時

まず、全体を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公式ドキュメント日本語版

参考図書

この本は、ひとつ前のバージョンのBootstrapのものですが、動作原理はバージョン4もバージョン5も変わらないので、基本的なところを理解したい方におすすめです。

Bootstrap 4 フロントエンド開発の教科書
著者:宮本麻矢ら
価格:3428円(Kindle)
スポンサーリンク