![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
[[レスポンシブWebデザインの為の基礎知識]] > bootstrapのグリッドシステム * bootstrapのグリッドシステム [#z2a73707] #setlinebreak(on) #contents bootstrap はレスポンシブWebデザインに対応したCSSフレームワークで、１からCSS定義するのに比べてコーディング量を大幅に削減できる等のメリットがある。 ここでは bootstrap で特に有用な機能であるグリッドシステムについて記載する。 ** グリッドシステムについて [#i68fdabf] グリッドシステムは、スマートフォンやタブレット等のデバイス幅に応じて表示を切り替える為の仕組みで、 これをうまく使用する事で、比較的容易にレスポンシブWebデザイン対応のWebページを作成する事ができる。 ・bootstrap では１行を12個のカラムに見立てて管理する。 ・行はclass="row"で表し、その配下にカラムを定義する。 ・カラムは class="col-XX-NN"で表す。 ・カラムの class="col-XX-NN" の XX はデバイスの種類を設定する。(後述)。 ・カラムの class="col-XX-NN" の NN は1行あたり120になるように数値を設定する。 ・カラムの class="col-XX-NN" の NN は1行あたり12になるように数値を設定する。 col-XX-NN の XX 部分には、以下の値が使用できる。 |値|説明|使用例|h |xs|画面幅が 768px以下 の場合(スマホ等)に採用する値。|class="col-xs-10"| |sm|画面幅が 768px以上、992px未満 の場合(タブレット等)に採用する値。|class="col-sm-10"| |md|画面幅が 992px以上、1200px未満 の場合(デスクトップ等)に採用する値。|class="col-md-10"| |lg|画面幅が 1200px以上 の場合(大型デスクトップ等)に採用する値。|class="col-lg-10"| &br; col-XX-NNの NN 部分には、1〜12の値が使用できるが、1行あたりの合計が12になるように割り当てる。(12を超える場合は、次の行に表示される) 以下のサンプルは１行あたりに、デスクトップの場合は３カラム、タブレットの場合は２カラム、スマホの場合は１カラムを表示します。 #myhtml2(){{ <div class="row"> <div class="col-sm-6 col-md-4" style="background:red;">カラム１</div> <div class="col-sm-6 col-md-4" style="background:blue;">カラム２</div> <div class="col-sm-6 col-md-4" style="background:yellow;">カラム３</div> </div> }} 実行結果（ウィンドウサイズを変更して確認してみて下さい。） #html(<span style="cursor:pointer;color:#00f;text-decoration:underline;" onclick="window.open('sample_bootstrap1.html')">サンプルページ</span>) ** デバイスに応じて表示/非表示を切り替える [#yb3659e6] #todo(hidden-XX , visible-XX)
