
Bootstrapのグリッドシステムを使ってレスポンシブデザインを実現する
今や、どのWebサイトもパソコンやスマホなどのマルチデバイスで閲覧することが当たり前になっています。とはいえ、幅広く対応してパソコン用サイト・スマホ用サイトなどを作るのは結構大変です。そこで活躍するのが、Bootstrapのグリッドシステムです。グリッドシステムを活用すれば、簡単にマルチデバイス対応のレスポンシブデザインを実現することが可能です。
- SE
- 確かに、レスポンシブデザインに対応していないWebサイトはスマホで閲覧したとき、少し見にくいですよね。
- PL
- 見にくいサイトはそれだけでお客さんが離れていくこともあるので、ぜひレスポンシブデザインへの対応を行ってくださいね。
目次
Bootstrapのグリッドシステムとは?
グリッドシステムとは、「ブロックごとにテキストや画像を配置しスッキリとした画面を作る手法」のことです。Bootstrapでは、横幅を12分割にしたグリッドシステムを採用しています。
このように、「何をいくつ分のブロック(グリッド)で表示するか」をコントロールすることで、デザイン性・自由度共に高いコンテンツを作成することができるのです。そしてBootstrapでは、グリッドシステムを上手く使うことで簡単にレスポンシブデザインを実現することができます。
Bootstrapのグリッドシステムを使ってレスポンシブデザインを実現
Bootstrapでは、様々なデバイスに対応するためのHTMLクラスがあらかじめ用意されています。
1 2 |
.col-区間名-列数 ([区間名]以上の画面幅で[列数]幅にする) |
「区間名」というのは、Bootstrapが定めているブレークポイント間のことを指します。詳細は下記のとおりです。
区間名 | デバイス | 画面幅(px) |
---|---|---|
xl | デスクトップPC | 1200px以上 |
lg | ノートPC | 992px以上 |
md | タブレット | 768px以上 |
sm | ファブレット | 576px以上 |
xs | スマートフォン | 576px未満 |
つまり、スマートフォンの画面幅を越えたらこのスタイルを適用するなど、それぞれの区間で任意のスタイルを指定することができるのです。レスポンシブデザインも簡単にできそうですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Form Sample</title> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.min.js"></script> <style> h2 { color: white; background-color: #00b7ce; text-align: center; } </style> </head> <body> <br/><br/> <div class="container-fluid"> <div class="row"> <!-- xs(スマートフォン)のときは12ブロック・md(タブレット)のときは6ブロック --> <div class="col-xs-12 col-md-6"> <h2>レスポンシブデザイン</h2> </div> </div> </div> </body> </html> |
ブラウザではどのように表示されているかもチェックしていきましょう。
md(画面幅768px以上)の場合
xs(画面幅576px未満)の場合
ノートPCやタブレットなどの大きな画面のときは半分の6ブロック、スマートフォンなどの小さな画面のときは12ブロックできちんと表示されています。
- SE
- なるほど。確かに何個もHTMLソースを用意する必要がなくなりますね。
- PL
- そうなんです。クラスを指定するだけなので1回書けば様々なデバイスに対応できますよ。
グリッドシステムの使い方をマスターしてレスポンシブデザインに対応しよう
この記事では、Bootstrapのグリッドシステムの概要からレスポンシブデザインを実現する方法までご紹介していきました。本来は複数のHTMLソースを用意する必要があるのですが、Bootstrapでは1つのソースでパソコン・スマホ・タブレットなどに対応することができます。ユーザーにとって使いやすいコンテンツにするためにも、ぜひこの記事を参考にレスポンシブデザインを実現してみてはいかがでしょうか。