BootstrapでレスポンシブなWebサイト制作

第2回 グリッドシステムとブレイクポイントを理解する

この記事を読むのに必要な時間:およそ 4 分

今回は前回軽く触れた,Bootstrapのグリッドシステムについて紹介します。

グリッドシステムとは?

グリッドシステムは,レイアウトを格子状に分解し配置するデザインする手法です。グリッドシステムを使うことで縦の揃えが容易に表現できるため,デザインとして安定したレイアウトを構築できます。

Bootstrapでは12カラム(レイアウトを縦に12分割)のグリッドシステムが採用されており,横一行の合計が12カラムになるようにレイアウトをしていきます。

例えば,メインカラムとサブカラムがあるWebサイトのレイアウトを考えた場合,Bootstrapではメインカラムを8カラム,サイドバーカラムを4カラムと構成していきます。

画像

また,カラムには自動的に片方15px両方で30pxのグリッドガーターというpaddingがつくため,意識しないでもコンテツを見やすく配置できます(このグリッドガーターは初期値は30pxですが,好きな幅にカスタマイズできます)。

ブレイクポイントとは?

ブレイクポイントは,画面サイズに応じてレイアウト切り替わるポイントのことです。

Bootstrapのグリッドシステムではカラムが横並びから縦並びに切り替わるポイントとなります。「スマホ」「タブレット」「デスクトップ」「大画面デスクトップ」のブレイクポイントがあり,それぞれでの挙動を設定できます。

次の表に記したルールに則りclass名を指定することで,該当のブレイクポイントでレイアウトを変更できます。

スマホ
(<768px)
タブレット
(768px≦)
デスクトップ
(992px≦)
大画面デスクトップ
(1200px≦)
配置ルール 常に横並び 規定の画面幅を下回ると縦並びになる
class名の接頭辞 col-xs- col-sm- col-md- col-lg-

※接頭辞の後にカラム数の数値をつけたものがclass名となる

例を挙げて説明します。デスクトップサイズ(992px~1199px)で2列並び,それ位下の幅では縦に並べたい場合には,並べたい要素のclass名を「col-md-6」とします。

画像

また,デスクトップサイズでは4カラム,タブレットでは6カラムというように複数のclass名を設定することで,条件を重ねがけできます。

例えば,デスクトップサイズで3列並び,タブレットで2列並び,スマホで1列としたい場合には,並べたい要素のclass名に「col-md-4」「col-sm-6」の2つを指定します。

画像

実際にBootstrapを使って確かめる

どのような挙動をするかを早く覚えるには触ってみるのが一番です。まずは,CDNでBootstrapを読み込んで試してみましょう。

HTML5でドキュメントを作りhead要素内に,次のコードを記述します。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!--ローカル上でのテストの場合は"http:"を足さないと上手く読み込めない-->

これだけで,Bootstrapが利用できるようになります。

なお,次項に掲載したスクリーンショットでは,要素をわかりやすくするために次のCSSを追加し,意図的にマージンを開け,背景を敷いています。

<style>
body{
  font-size:16px;
  font-weight:bold;
  }
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {
  background: #7abcff; /* Old browsers */
  background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Firefox3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
  font-size:16px;
  padding:15px;
  font-weight:bold;
  border-radius:15px;
  color:#fff;
}
.container{
  background-color:#FFF2D0;
  border-radius:15px;
}
.row{
  background-color:#D6F4BD;
  border-radius:15px;
  }
div{
  margin:30px 0;
}
</style>

著者プロフィール

齋藤みつる(さいとうみつる)

高校時代には漫研とロボ研に没頭しつつ,ポートフォリオ・履歴書を様々なデザイン・SI会社に送り,採用されてから高校を中退してデザイナー・SE活動をはじめる。2011年からフリーランスとして活動を始め,2年前にナビスインタナショナル株式会社と専属フリーランス契約を結び,Web事業部の責任者となっている。

URL:http://www.navice.co.jp/

コメント

コメントの記入