スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

Bootstrapのブレイクポイントを使えば、レスポンシブコーディングが簡単に

時代はマルチデバイスへ

スマートフォンが出始めた頃、パソコン用のサイトはスマホの小さな画面に向かないため、スマホ専用サイトが数多く登場しました。スマホの小さい画面でも必要な情報が見やすいためスマホ専用サイトは大変便利なものですが、開発側から見るとデメリットも多くありました。それは、パソコンとスマホ専用サイト両方の制作コストが掛かること、メンテナンスを別々に行わなければいけないことなどです。
さらに、急速に普及していったタブレット端末も画面サイズが様々で、パソコン、タブレット、スマホ、それぞれの専用サイトを作るのは現実的ではありません。

そこで、今注目を集めているのがレスポンシブサイトという考え方です。レスポンシブサイトは1つのWebサイトを閲覧デバイスに応じて画面を拡大縮小したり、情報を減らして表示させたりできます。それにより、どのデバイスでも見やすいサイトにすることができるのです。

レスポンシブコーディングを簡単に

レスポンシブサイトを初心者でも手軽に簡単に作りたい。そんな希望に答えてくれるのがBootstrapです。BootstrapはHTML5やCSSの基本的な知識があれば、レスポンシブコーディングが簡単に行えます。Bootstrapでは、12カラムのグリッドシステムが採用されています。つまり、レイアウトを縦に12分割しているというわけです。このカラムが画面サイズに応じて切り替わるポイントを、ブレイクポイントといいます。Bootstrapには4つあり、それぞれ大画面ディスプレイ(1200px以上)、一般的なパソコン(992pxから1199px)、タブレット(768pxから991px)、スマートフォン(768px未満)となっています。ブレイクポイントを設定することによって、カラムが横並びから縦並びに切り替わるポイントを指定できます。例えば、デスクトップでは要素を3列並び、タブレットは2列並び、スマホは1列並びという指定が可能なのです。さらに、ブレイクポイントは自分で追加することも可能です。

Bootstrapを使うことで、簡単にレスポンシブコーディングができますので、利用してみましょう。