■ 前提知識:効果的なデザインの4原則
http://www.atmarkit.co.jp/ait/articles/1502/13/news014.htmlhttp://www.atmarkit.co.jp/ait/articles/1502/20/news012.html
http://www.atmarkit.co.jp/ait/articles/1502/27/news025.html
http://www.atmarkit.co.jp/ait/articles/1503/06/news003.html
[1] 近接 : 近しい情報をグルーピングする [2] 整列 : グルーピングした情報を整列させて、つながりをより強いものにする ★今回関係するのはココ★ [3] 反復 : 情報に一体感を持たせる [4] コントラスト : 異なる要素を際立たせ、情報を伝わりやすくする
■ グリッドシステム
整列の原則を最も有効に使ったものが「グリッドシステム」* レイアウトを格子状に分解し配置するデザインする手法 * Bootstrapでは、横幅を12分割のグリッドシステムが採用
その他の用語
* ブレイクポイント* 画面サイズに応じてレイアウト切り替わるポイントのこと
仕様
http://bootstrap3.cyberlab.info/css/gridSystem.html■ サンプル
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> </head> <body> <div id="header" class="container" style="background-color: red;">Header</div> <div class="container"> <div class="row"> <!-- グリッドシステムとは:合計12分割 --> <div class="col-sm-3" style="background-color: blue;">青</div> <div class="col-sm-6" style="background-color: pink;">ピンク</div> <div class="col-sm-3" style="background-color: yellow;">黄色</div> </div> </div> <div id="footer" class="container" style="background-color: green;">Footer</div> <script src="">http://code.jquery.com/jquery.js"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> </body> </html>
補足
containerクラス* 左右に余白を設けて、「内部の幅」を固定してブラウザの中央に配置するcol-sm-XXについて
http://gihyo.jp/design/serial/01/bootstrap3/0002
* col-xs-XX : スマホ用 * col-sm-XX : タブレット用 * col-md-XX : デスクトップ用 * col-lg-XX : 大画面デスクトップ用
参考文献
http://gihyo.jp/design/serial/01/bootstrap3/0002container
http://d.hatena.ne.jp/web-0818/20150410/p1