【Bootstrap4】Bootstrap 4 ~ 基本編 / グリッドシステム ~

■ はじめに

 * Bootstrapの特徴をみていく

■ 前提知識:効果的なデザインの4原則

http://www.atmarkit.co.jp/ait/articles/1502/13/news014.html
http://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 : 大画面デスクトップ用


関連記事

Bootstrap 4 ~ 入門編 ~

http://blogs.yahoo.co.jp/dk521123/28015251.html