中古車購入をわかりやすく。軽の中古車「クルマのハンシン」新潟県阿賀野市

クルマのハンシン

慣れない中古車購入。私が一つひとつ教えます!

クルマのハンシン代表
高橋 英徳(中古自動車販売士)

0250-62-8084 待ち時間ゼロ 来店予約 受付時間9:00~19:30 0250-62-8084 待ち時間ゼロ 来店予約 受付時間9:00~19:30

お問い合わせフォーム(お探し依頼・ご相談はこちら)

レイアウトのご説明

カラムについて グリッドレイアウトについての解説


今回「bootstrap」という仕組みを導入しレスポンシブを構築しています。
bootstrapは12個のカラムを組み合わせてレイアウトを形成するシステムです。 12個のカラムはPCのウィンドウサイズ・スマートフォンのサイズにより変化いたしますので、各サイズ毎に異なるレイアウトを形成することが可能です。


1.サイズ展開

サイズは、 ・大きいPCに合わせた「lg(ラージ)」サイズ、class名「.col-lg-**
・通常のPCに合わせた「md(ミディアム)」サイズ、class名「.col-md-**
・タブレットに合わせた「sm(スモール)」サイズ、class名「.col-sm-**
・スマートフォンにあわせた「xs(エクストラスモール)」サイズ、class名「.col-xs-**」 となります。
**は1~12までの数値が入ります。



2.構成例

実際に記述していくときは<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>
.col-md-6
.col-md-6


3.カラムの配置

<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>
.col-md-4
.col-md-8
.col-lg-2
.col-lg-10
サイズは「xs」の表示が優先されます。
表示の解説:
.col-md-4の場合はxsサイズでは1行表示(col-xs-12)、smでも1行表示(col-sm-12)、mdから指定サイズ「4」が適用され、この場合lgでもサイズ「4」が適用されます。 .col-xs-6にした場合は、全てのサイズで「6」が適用されます。



4.サイズ別カラムの組み合わせ

ウィンドウサイズ別に適用する指定サイズも変えることができます。

<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>
xsではサイズ「6」にし、md以降でサイズ「2」にする
xsではサイズ「6」にし、md以降でサイズ「10」にする