みんなの声

2016.08.16

Bootstrap3でスマホ対応グリッドレイアウトを簡単作成

西村 文宏

ホームページ作成ガイド 西村 文宏 / All About

 

モバイル対応の段組が簡単に作れるBootstrap3のグリッドシステム

フレームワーク「Bootstrap3」

フレームワーク「Bootstrap3

CSSを駆使して自力で段組構造(マルチカラムレイアウト)を作るのはなかなか面倒です。同一HTMLでPCにもモバイル端末にも対応させようと思うと、なおさら手間が掛かります。そんなときには、グリッドレイアウト機能を提供してくれるフレームワークを活用すると便利です。

グリッドレイアウト機能を含むフレームワークは多種ありますが、Twitter社が製作した「Bootstrap(ブートストラップ)」も有名です。

3段組や4段組も簡単に作成できる

3段組や4段組も簡単に作成できる

Bootstrapには12段までの段組構造が簡単に作れるグリッドシステムが用意されています。この機能を活用すれば、例えば右図のように3段組や4段組を作ることも簡単です。ある段の中をさらに複数の段に分割するなどの複雑なレイアウトも簡単に作成でき、とても便利です。

そこで本記事では、このBootstrapを使ってモバイル端末にも対応したレスポンシブな段組構造を簡単に作成する方法をご紹介いたします。

※本記事はBootstrap Ver.3を使った方法の解説です。古いバージョンを使う方法に関しては、記事「Bootstrap2のグリッド機能で段組を作成」をご参照下さい。Ver.2と3では一部の仕様が異なるため、同じ記述方法は使えません。


 

横幅を12等分した使いやすいグリッドシステム

Bootstrapには、横幅を12等分したグリッドシステムが用意されています。あらかじめ決められたCSSのclass名を使って、「横12個のグリッドのうち何個分を使って段を作るか」を指定するだけで、簡単に段組構造が作れます。

Twitter Bootstrapのグリッドシステム

Bootstrapのグリッドシステム

 

12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる

12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる

例えば、右図のように「グリッドを4つ分使うボックス」を3個記述すれば、横幅を3等分した3段組になります。

このように、12分割されたグリッドを自由に組み合わせることで、簡単に段組構造が作れます。
 

記述するHTMLソースは簡単で、下記のように段組を構成するブロックにclass属性を加えて、指定のclass名を付加するだけです。

   
1段目
   
2段目
   
3段目

過去のバージョンとは異なり、Bootstrap3ではこの「グリッドの指定」部分に、端末(画面サイズ)別の指定を加えられるようになりました。

12分割されたグリッドが、端末(画面サイズ)別に4種類ある

Bootstrap3には、(A)「どんな端末で閲覧された場合」に、(B)「何個分のグリッドを使って表示するか」という2つの情報を同時に指定するclass名が用意されています。詳しい使い方は後述しますが、以下のように組み合わせて使います。

Bootstrap3では端末(画面サイズ)別に使用グリッド数を指定できる

Bootstrap3では端末(画面サイズ)別に使用グリッド数を指定できる


これらのclass名を使って、端末ごとに横幅が合計12になるように指定して使います。

12分割されたグリッドシステムの使い方

例えば以下のHTMLソースのように、段組を構成するdiv要素を3つ用意して、それぞれに下記の通りのCSS(class名)を付加した場合を考えます。

   
   
   

上記のソースには合計9個のclass名があります。例えば「col-md-7」は、「中型端末(MD)以上」では「12等分されたグリッドのうち7個分を使って1段を作る」という意味になります。それぞれの記述の意味をまとめると、下図のようになります。

端末(画面サイズ)別に段組構造を指定できる

端末(画面サイズ)別に段組構造を指定できる


このHTMLソースにある内側の3つのdiv要素は、端末(画面サイズ)に応じて、以下のように表示されます。

中型端末(MD=デスクトップ/横幅992px以上)の場合

1段目「col-md-7」→2段目「col-md-3」→3段目「col-md-2」で3段組

1段目col-md-7→2段目col-md-3→3段目col-md-2で3段組

この場合は右図のように「左端58%・中央25%・右側17%」の3段組で表示されます。

  • 1つ目のdiv要素は、グリッドを7/12使って表示されます。
  • 2つ目のdiv要素は、グリッドを3/12使って表示されます。
  • 3つ目のdiv要素は、グリッドを2/12使って表示されます。


7+3+2=12で、合計12個のグリッドを使っています。したがって、3段組になります。なお、ここでは「大型端末(LG)」については指定していないため、大型端末(=横幅1200px以上)で閲覧された場合にはこの中型端末の設定がそのまま使われます。

小型端末(SM=タブレット/横幅768px以上)の場合

col-sm-12→col-sm-6→col-sm-6

1段目col-sm-12→2段目col-sm-6→3段目col-sm-6で、後ろの2段だけで2段組

この場合は右図のように、「最初は段組なし」+「その下は左右50%ずつの2段組」で表示されます。

  • 1つ目のdiv要素は、グリッドを12/12使うので段組になりません。
  • 2つ目のdiv要素は、グリッドを6/12使って表示されます。
  • 3つ目のdiv要素は、グリッドを6/12使って表示されます。


最初のdiv要素は1つで12個のグリッドを使っているので段組になりません。その次は6+6=12で、合計12個のグリッドを使っています。したがって、2段組になります。

極小端末(XS=スマートフォン/横幅768px未満)の場合

col-xs-12→col-xs-12→col-xs-12

1段目col-xs-12→2段目col-xs-12→3段目col-xs-12で、どれも段組にはならない

この場合は、右図のようにすべて段組なしで表示されます。

  • 1つ目のdiv要素は、グリッドを12/12使うので段組にならず、
  • 2つ目のdiv要素も、グリッドを12/12使うので段組にならず、
  • 3つ目のdiv要素も、グリッドを12/12使うので段組になりません。

以上で、下記のようなレスポンシブな段組構造が作成できたことになります。

  • PC向けには3段組の構造で表示し、
  • タブレット向けには段組を一部分だけ解除して表示し、
  • スマートフォン向けには段組を完全に解除して表示

このように、端末(画面の大きさ)別に、各ブロックをどのように段組にするか(または段組にしないか)を指定できます。

すべての端末で3段組にしたい場合

先程の例では、端末(画面サイズ)別に段の構造が変化するように作りました。閲覧者の環境に関係なくすべての端末で同じ段組構造を作りたい場合には、以下のように短く記述できます。

   
1段目
   
2段目
   
3段目
12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる

12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる

上記のように「col-xs-4」クラスを3つ並べれば、右図のように3等分した3段組が作れます。各段の横幅が「4/12(=12分の4)」ずつになるからです。

先程のHTMLソースとは異なり、ここでは端末の種類を示すclass名には「XS」だけしか指定していません。この場合は「XS以上に対して適用」と解釈されるため、すべての端末に対する装飾になります。

グリッドを使って簡単に段組構造が実現できるBootstrap3

このように、Bootstrap3のグリッドレイアウト機能を使うと、とても簡単にレスポンシブな段組構造が作れます。実際に使ってみる際には、上記のHTMLソースのほかにBootstrap3自体を読み込むための記述などが必須です。詳しくは次のページでご紹介いたします。

それでは次のページで、Bootstrap3を実際に活用するために必要な各種記述を見ていきましょう

Bootstrap3を活用するために必要な記述

Bootstrap3は、ファイル一式をダウンロードして自サイトに設置することもできますが、CDNサーバ(=有名ライブラリなどの構成ファイルを配信してくれるサービス)経由で読み込むこともできます。CDNサーバ経由で読み込めば、設置作業が不要なので楽でおすすめです。以下で、その方法をご紹介いたします。

CDNサーバからCSSファイルを1つ読み込むだけ
まず、HTMLソースのhead要素内に以下の1行を記述します。これは、CDNサーバ上に公開されているCSSファイルを、link要素を使って読み込む記述です。

 

※上記は、本稿執筆時点での最新版であるBootstrap Ver 3.3.6を読み込む場合の記述です。

最新バージョンのCSSファイルをCDNサーバから読み込む記述を、そのままコピー&ペーストする

最新バージョンのCSSファイルをCDNサーバから読み込む記述を、そのままコピー&ペーストする

最新バージョンを読み込む記述は、Bootstrap3配布サイト内にあるBootstrap CDN項目(右図)で調べて下さい。

なお、バージョンによってintegrity属性に記述する値が異なりますから、Bootstrap3サイト上に掲載されているCDNの書き方全体をコピー&ペーストして使う必要があります(※integrity属性は記述を省略しても動作しますが)。

グリッドシステムを使うだけなら、読み込むのは「bootstrap.min.css」だけ
Bootstrap3を構成する3ファイル

Bootstrap3を構成する3ファイル

Bootstrap3は、下記に示す3つのファイルで構成されています。

  • メインCSSファイル「bootstrap.min.css
  • オプションテーマCSS「bootstrap-theme.min.css」
  • JavaScript「bootstrap.min.js」


しかし、グリッドシステムを使いたいだけの場合は、先頭の「bootstrap.min.css」ファイルただ1つを読み込むだけで充分です。

スマートフォンにも対応させる場合
Bootstrap3はレスポンシブ・ウェブデザインに対応していますが、ウェブページをスマートフォンなどのモバイル端末にも対応させたい場合には、head要素内に以下の1行を記述しておくのを忘れないようにして下さい。

 

ウェブページをモバイル対応させたい場合には、Bootstrapの有無に関係なくこの記述が常に必要です。詳しくは記事「スマートフォン対応サイトを作る際の注意点」をご参照下さい。

グリッドシステムを使いたい部分に加えるHTMLソース

グリッドシステムを使ってグリッドレイアウトを作りたい部分では、以下のようにHTMLソースを記述します。

class="container-fluid">
class="row">
1段目
2段目
3段目
    :  :  :

まず、全体を

class="container-fluid">~

で囲みます。また、行を作るために

class="row">~

で囲みます。その中に、必要なだけ「段」を作るためのブロックを列挙します。

例えば、div要素4つを使って下記のように指定すれば、広い画面(MD以上)では4段組になり、狭い画面(SM)では2段組、もっと狭い画面(XS)では段組を解除して表示できます。

1段目
2段目
3段目
4段目

 

グリッドシステムを使って段組構造を作ったサンプルページ

Bootstrap3での段組作成サンプルページ1

Bootstrap3での段組作成サンプルページ1

上記のHTMLソースを使って段組構造を作ったサンプルページを用意しました。表示例は右図の通りです。お使いのブラウザで表示を確認してみて下さい。右図では4段組に見えていますが、

  • 広い画面(MD)では4段組、
  • やや狭い画面(SM)では2段組、
  • とても狭い画面(XS)では段組なし


というように、ブラウザの描画領域の横幅に合わせて表示が変化します。Bootstrapを使うと、このように簡単にレスポンシブな段組構造が作れます。
 

ネスト(入れ子)構造の段組も作れる

さて、このBootstrap3のグリッドシステムでは「ネスト(入れ子)構造」を作ることもできます。例えば、ページ全体を左右2段に分割した上で、右側の段だけをさらに3段に分ける……といった複雑な構造も作成可能です。

最後に、Bootstrap3のグリッドシステムを駆使して、複雑な段組構造を作成する方法をご紹介いたします。

段の中にさらに段組構造を作る場合でも12分割

Bootstrapで作れる段組構造は1階層だけではありません。ページの横幅全体を2段組に分割した上で、片方の段の中をさらに3等分するような、複数階層の段組構造も簡単に作れます。

何階層でも、段組の中に段組を含められる

何階層でも、段組の中に段組を含められる


Bootstrap3のグリッドシステムは、常にその場の横幅を12分割する仕様になっています。上図の下側で示したように、段組の内側にさらに段組を作る場合であっても「その領域の横幅を12分割」した数字を使って、合計が12になるよう指定します。

例えば、「1階層目でグリッド10個分を使った段」の中をさらに分割する場合でも、2階層目では「合計10になるよう指定」するのではなく、「合計12になるよう指定」します。何階層目の場合でも同様です。

2階層の段組を作る例

段組を構成する段の中に、さらに小さな段組を含めることも可能

段組を構成する段の中に、さらに小さな段組を含めることも可能

例えば右図のように、ページの横幅全体を2段組にした上で、右側の段の中を4段組にするような2階層の段組構造を作ってみましょう。HTMLソースを以下のように記述します。

まずは前ページでご紹介したように、2つのdiv要素を使って2段組を作ります。

   
 
...1段目(左)...
 
...2段目(右)...

ここでは、描画領域の横幅が中サイズ(MD)以上なら「左3:右9」で分割、小サイズ(SM)なら「左4:右8」で分割、極小サイズ(XS)なら段組なしにしています。

続いて、右側の段を作るdiv要素の中に、以下のようにHTMLを書き加えます。

...1段目(左)...
 
右段内の1段目
右段内の2段目
右段内の3段目
右段内の4段目

ここでは、描画領域の横幅が中サイズ(MD)以上なら4段組(各段が3グリッドずつ)に分割、小サイズ(SM)なら2段組(各段が6グリッドずつ)、極小サイズ(XS)なら段組なしにしています。

上記のように記述することで、「2段組の中にさらに4段組がある」という入れ子構造(2階層)の段組が作れます。

グリッドシステムを使って入れ子の段組構造を作ったサンプルページ

Bootstrap3での段組作成サンプルページ2

Bootstrap3での段組作成サンプルページ2

上記のHTMLソースを使って段組構造を作ったサンプルページを用意しています。表示例は右図の通りです。お使いのブラウザで表示を確認してみて下さい。

  • 中サイズ(MD)以上では、まず「メニュー段(左)」と「メイン段(右)」とで2段組になった上で、「メイン段」の内部がさらに4段組になります。
  • 小サイズ(SM)では、まず「メニュー段(左)」と「メイン段(右)とで2段組になった上で、「メニュー段」の内部がさらに2段組になります。
  • 極小サイズ(XS)では、すべての部分で段組にはなりません。


以上のように、入れ子構造(=複数階層)の段組であってもレスポンシブな形(=画面サイズに応じて適切にレイアウトが変化する表示)で簡単に作れます。
 

段組構造が簡単に作れるフレームワーク「Bootstrap」

今回は、有名フレームワークBootstrap3に含まれているグリッドシステムを使って、簡単に段組構造(マルチカラムレイアウト)を作る方法を解説いたしました。ウェブページの製作では、段組構造を使う機会も頻繁にあるでしょう。ぜひ、便利なグリッドシステムを活用して、楽に作ってみて下さい。

この記事に関するアンケートはこちら

 

【関連記事をもっと読む】

 

▼コラム提供サイトはこちら

生活総合情報サイトAll About(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。

みんなの声

スポーツ

映画