Eyecatch Bootstrap1

Twitter Bootstrap 3 の基本 Grid Systemのサンプル3

Posted 3月 31 2015 by tths  , , ,

Twitter Bootstrap 3 の基本 Grid Systemのサンプル3

「グリッドデザイン」の3回目です。グリッドシステムに慣れてきましたでしょうか。
今回は次のようなサンプルを作成します。

今回のサンプル

  1. 要素同士の間に隙間をグリッド数で指定する方法
  2. 要素のネストを指定する方法
  3. 要素の表示順番を指定する方法

では、1つずつサンプルソースを見ていきましょう。
長くなってきたので、bodyタグ内のHTMLのみ記述していきます。

サンプル1:要素同士の間の隙間をグリッド数で指定する方法

<div class="container-fluid">
	<h1>BootStrapの練習です。</h1>
	<div class="row">
		<div class="col-sm-6">.col-sm-6</div>
	</div>
	<div class="row">
		<div class="col-sm-3 col-sm-offset-6">.col-sm-3<br>.col-sm-offset-3</div>
	</div>
	<div class="row">
		<div class="col-sm-6">.col-sm-6</div>
		<div class="col-sm-3 col-sm-offset-3">.col-sm-3<br>.col-sm-offset-3</div>
	</div>
</div><!-- /container -->

→全部で3行分のグリッド指定をしていますが、
「col-sm-offset-*」という記述がある点がいままでと異なるところです。
これは指定した要素の左側に、「*」で指定した数ぶんのグリッドを空けておくというオフセット指定になります。
つまり上記サンプルは、
ひとつ目は6グリッド要素を普通に指定、
ふたつ目は3グリッド要素に6グリッド分のオフセットを指定
3つ目は、6グリッド要素を普通に指定した後、3グリッド分のオフセットを指定し、さらに3グリッド分の要素指定
という形になるわけです。
表示は以下のようになります。
index_5-1.html

サンプル2:要素のネストを指定する方法

テーブルにもネストがあるように、グリッドシステムにもネストがあります。ネストとは「入れ子」のことです。
つまり「row」が入れ子状態になることをいいます。早速サンプルをみてみましょう。

<div class="container-fluid">
	<h1>BootStrapの練習です。</h1>
	<div class="row">
		<div class="col-sm-8">
			<div class="row">
				<div class="col-sm-6">.col-sm-6</div>
				<div class="col-sm-3">.col-sm-3</div>
			</div>
		</div>
	</div>
</div><!-- /container -->

表示は以下のようになります。
index_6-1.html

最初に8グリッド分のDIVを用意し、その中に6グリッドと3グリッドのDIVを設けました。
このことからわかることは、子要素は親要素を12グリッドとして、そのグリッドに沿ったサイズで設定されていくということです。

サンプル3:要素の表示順番を指定する方法

普通はHTMLに記述した順に左から要素は表示されていきますが、それを逆にしたいときなどに使える方法です。
サンプルを見てみましょう。

<div class="container-fluid">
	<h1>BootStrapの練習です。</h1>
	<div class="row">
		<div class="col-md-6 col-md-push-3">.col-sm-6</div>
		<div class="col-md-3 col-md-pull-6">.col-sm-3</div>
	</div>
</div><!-- /container -->

「col-md-push-*」「col-md-pull-*」の記述が、今回のポイントです。
pushの方は、右側方向に「*」で指定したグリッド数ぶんだけ移動、
pullの方は、左側方向に「*」で指定したグリッド数ぶんだけ移動、
という意味になります。
ですので、上記例では、middleサイズ以上の表示時に、2つめの要素の方が左側に表示されることになるのです。
index_6-2.html

注意する点は、「col-XX-push-N」のXXのサイズと移動するサイズN、グリッド数を指定する「col-XX-N」クラスのXXのサイズと移動するサイズNを同じにしておくことです。
また、pushなのかpullなのかも間違えないようにしましょう。
どれかがずれていると、表示全体がくずれてしまうことになります。

ウィンドウサイズが小さくなると、横並びになっていたものを縦並びにするという動きは非常によくあります。
その際、基本的には左側の要素の方が、右側の要素よりも上に並ぶ、という順番が通常です。
これをあえて逆にしたいようなときにこの設定が上手く活用できますね。

まとめ

グリッドシステムの応用パターンをみてきました。グリッドシステムをうまく活用して、
簡単にページ全体のレイアウトを作成できるようになることがわかっていただけたでしょうか。
次回は、フォームを作成する方法を見ていきます。


Bootstrap Twitter Bootstrap



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。