今回「bootstrap」という仕組みを導入しレスポンシブを構築しています。
bootstrapは12個のカラムを組み合わせてレイアウトを形成するシステムです。
12個のカラムはPCのウィンドウサイズ・スマートフォンのサイズにより変化いたしますので、各サイズ毎に異なるレイアウトを形成することが可能です。
サイズは、
・大きいPCに合わせた「lg(ラージ)」サイズ、class名「.col-lg-**
」
・通常のPCに合わせた「md(ミディアム)」サイズ、class名「.col-md-**
」
・タブレットに合わせた「sm(スモール)」サイズ、class名「.col-sm-**
」
・スマートフォンにあわせた「xs(エクストラスモール)」サイズ、class名「.col-xs-**
」
となります。
**は1~12までの数値が入ります。
実際に記述していくときは<div class="row"></div>
(行を構成)で囲ってあげる必要があります。
<div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
<div class="row"></div>
の中にサイズを指定したコード「.col-サイズ-**」
を記述します。
<div class="row"></div>
の中で記述するサイズの数値は1行の合計が12になる必要があります。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> <div class="row"> <div class="col-lg-2">.col-lg-2</div> <div class="col-lg-10">.col-lg-10</div> </div>
ウィンドウサイズ別に適用する指定サイズも変えることができます。
<div class="row"> <div class="col-xs-6 col-md-2">xsではサイズ「6」にし、md以降でサイズ「2」にする</div> <div class="col-xs-6 col-md-10">xsではサイズ「6」にし、md以降でサイズ「10」にする</div> </div>