.net column

.NET開発者のためのブログメディア
グリッド

Bootstrapのグリッドシステムを使ってレスポンシブデザインを実現する

2020年04月09日

今や、どのWebサイトもパソコンやスマホなどのマルチデバイスで閲覧することが当たり前になっています。とはいえ、幅広く対応してパソコン用サイト・スマホ用サイトなどを作るのは結構大変です。そこで活躍するのが、Bootstrapのグリッドシステムです。グリッドシステムを活用すれば、簡単にマルチデバイス対応のレスポンシブデザインを実現することが可能です。

SE
確かに、レスポンシブデザインに対応していないWebサイトはスマホで閲覧したとき、少し見にくいですよね。
PL
見にくいサイトはそれだけでお客さんが離れていくこともあるので、ぜひレスポンシブデザインへの対応を行ってくださいね。

Bootstrapのグリッドシステムとは?

グリッドシステムとは、「ブロックごとにテキストや画像を配置しスッキリとした画面を作る手法」のことです。Bootstrapでは、横幅を12分割にしたグリッドシステムを採用しています。

グリッド表示の例

このように、「何をいくつ分のブロック(グリッド)で表示するか」をコントロールすることで、デザイン性・自由度共に高いコンテンツを作成することができるのです。そしてBootstrapでは、グリッドシステムを上手く使うことで簡単にレスポンシブデザインを実現することができます。

Bootstrapのグリッドシステムを使ってレスポンシブデザインを実現

Bootstrapでは、様々なデバイスに対応するためのHTMLクラスがあらかじめ用意されています。

「区間名」というのは、Bootstrapが定めているブレークポイント間のことを指します。詳細は下記のとおりです。

区間名デバイス画面幅(px)
xlデスクトップPC1200px以上
lgノートPC992px以上
mdタブレット768px以上
smファブレット576px以上
xsスマートフォン576px未満

つまり、スマートフォンの画面幅を越えたらこのスタイルを適用するなど、それぞれの区間で任意のスタイルを指定することができるのです。レスポンシブデザインも簡単にできそうですね。

ブラウザではどのように表示されているかもチェックしていきましょう。

md(画面幅768px以上)の場合
md(画面幅768px以上)の場合

xs(画面幅576px未満)の場合
xs(画面幅576px未満)の場合

ノートPCやタブレットなどの大きな画面のときは半分の6ブロック、スマートフォンなどの小さな画面のときは12ブロックできちんと表示されています。

SE
なるほど。確かに何個もHTMLソースを用意する必要がなくなりますね。
PL
そうなんです。クラスを指定するだけなので1回書けば様々なデバイスに対応できますよ。

グリッドシステムの使い方をマスターしてレスポンシブデザインに対応しよう

この記事では、Bootstrapのグリッドシステムの概要からレスポンシブデザインを実現する方法までご紹介していきました。本来は複数のHTMLソースを用意する必要があるのですが、Bootstrapでは1つのソースでパソコン・スマホ・タブレットなどに対応することができます。ユーザーにとって使いやすいコンテンツにするためにも、ぜひこの記事を参考にレスポンシブデザインを実現してみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)