Bootstrapのグリッドを実装する

グリッド

Bootstrapでは、グリッドシステムという仕組みを利用する事が出来ます。グリッドシステムとは、デバイスの画面を縦に12分割したグリッドに沿うようコンテンツを配置するレイアウト方法です。

このグリッドシステムとはデザインを美しく見せるための手法で、本当に昔から使われてきました。それこそ活版印刷が登場する前のヨーロッパでも使われていたくらいです。日本では、少し馴染みが薄いのですが、欧米では昔からよく使われているデザイン手法です。

Bootstrapでもそれを踏襲した手法が使われているのですね。そのおかげで、この手法に則ってデザインを作っていくとそれだけできれいに見えます。

レスポンシブ

Bootstrapのグリッドシステムを使えば、レスポンシブに対応させることが出来ます。レスポンシブデザインとはPCでもスマホでもいい感じに見せてくれるデザインです。万能ではないですが、今は主流になっている手法です。

Bootstrapでは、特別なコードを書く必要はありません。あらかじめ用意されているので、スマホなど画面幅によって配置やコンテンツのサイズを変える事が出来るのです。

では、実際の使い方をみてみましょう。例えば以下のようなレイアウトを実現する場合です。

このデザインを実現するためには、このようなコードが必要になります。

まずcontainerというCSSクラスが用意されています。これは、いちばん大きな入れ物のようなものです。これを記述することコンテンツをいい感じに真ん中揃えにしてくれます。

<div class="container">

</div>

その中にはrowという行を作るためのクラスを作ります。

<div class="container">
    <div class="row">

    </div>
</div>

その中に並べたい列を作っていくクラスを作ります。この例では2つの列を均等に横並びになります。colとうのは「列」という意味ですね。

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

ブレークポイント

Bootstrapには画面のサイズによってレイアウトを変更できる特徴があります。ユーザーの環境がどれくらいの大きさなのかを判定して、その表示を変えます。例えば大きなPCで見てたらこの画面、小さなスマホで見ていたらこの画面、タブレットで見てたらこの画面などを切り分けることができるのです。

５つの基準ポイントがありますね。このポイントの幅を超えた、またはこのポイントより小さくなった時に、レイアウトなどが変わります。この基準ポイントを「ブレークポイント」と呼びます。グリッドシステムでは、ブレークポイントを指定してコンテンツを配置します。また、Bootstrapでは各ブレークポイントに名前が付けられています。

ページ作成する

では、実際にグリッドシステムを使用してページを作成してみましょう。homeに以下のように、左にトラ、右に説明が表示されるようコードを書いていきます。※前のレッスンでダウンロードした画像を使用します。

home/index.html.erbに、containerを設定します。以下のように記述して下さい。また、オリジナルのcssが必要となりますので、新たにstyle.scssを作成して下さい。

# index.html.erb

<div class="container">
  <h1><%= @hello %></h1>
</div>

# style.scss 　

.container {
  background: orange;
}

トップページをブラウザで確認しましょう。

次に、rowとcolを実装します。home/index.html.erbで以下オレンジ部分を、追加して下さい。

<div class="container">
  <h1><%= @hello %></h1>
  <div class="row">
    <div class="col-md-4">
      <%= image_tag 'tiger.jpg', class: 'img-fluid' %>
    </div>
    <div class="col-md-8">
      <h2>トラ</h2>
      <p>説明</p>
    </div>
  </div>
</div>

では、ブラウザで確認してみます。ブラウザの幅を小さくしたり大きくしたりすると、以下のように、レスポンシブになっているはずです。このように実装するとブラウザの幅によって見た目が変わるのがわかりますね。

確認したら、オレンジ背景は要らないので消しておきましょう。

# style.scss

# 以下を消去する。

.container {
  background: orange;
}

課題

トラを並べた下に、以下のようなレイアウトを作成してみましょう。