本記事では、Bootstrapでレスポンシブデザインを作るための基礎を紹介します。
Contents
レスポンシブとは何か
レスポンシブデザインとは、あらゆるサイズのデバイスに合うように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では、どんな端末の画面も、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 |
例えば、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 |
では、実際に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を自分で書かなくても、色んな要素を作ることができます。例えば、次のようなカードを作りたいとします。
それには、次のような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のものですが、動作原理はバージョン4もバージョン5も変わらないので、基本的なところを理解したい方におすすめです。
