さぁ!検索しよう!

CSSフレームワーク「Bootstrap」のグリッドシステムの使い方を紹介します。

img1_mini

前回の記事ではBootstrapの導入からコンポーネントの追加までを簡単に紹介しましたが、今回はBootstrapの機能の一つであるグリッドシステムの使い方を紹介します。
グリッドシステムを使うことでレスポンシブWebデザインが簡単に導入出来ます。

使い方

公式サイトのCSS→Grid optionsの表を確認すると、Bootstrapではブレークポイントが初期値で下記のように設定されています。尚ブレークポイントはCustomize→Media queries breakpointsでそれぞれ変更が可能です。

img2_mini

スマートフォンは768pxまで、タブレットは768px~992px、PCは992px~1200px、大画面PCは1200px~となります。また、paddingはデフォルトで左右で15pxとなっています。

カラム数の変更

上記を踏まえて、各デバイスごとにカラム数を変更させます。スマートフォンを1カラムに、タブレットを2カラム、PC以上を3カラムのレイアウトにする場合は、下記のようになります。

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4"><div class="ele">要素</div></div>
        <div class="col-xs-12 col-sm-6 col-md-4"><div class="ele">要素</div></div>
    <div class="col-xs-12 col-sm-12 col-md-4"><div class="ele">要素</div></div>
</div>

colrowで囲み、クラス名の末尾の数字がxssmmdでそれぞれ合計12になるように記述します。

デモ1

デモを確認すると、ブレークポイントに応じてカラム数が変わることが確認できます。

カラムの入れ子

また、カラムを入れ子にすることも可能です。その場合はcolの中に再びrowを入れ、colを記述していきます。

<div class="row">
	<div class="ele col-xs-12 col-sm-6 col-md-4">
			<div class="row">
				<div class="col-xs-6 col-sm-7 col-md-4">
					<div class="c-ele">子要素</div>
				</div>
				<div class="col-xs-6 col-sm-5 col-md-8">
					<div class="c-ele">子要素</div>
				</div>
			</div>
	</div>
	<div class="ele col-xs-12 col-sm-6 col-md-4">
			<div class="row">
				<div class="col-xs-3 col-sm-4 col-md-6">
					<div class="c-ele">子要素</div>
				</div>
				<div class="col-xs-3 col-sm-4 col-md-3">
					<div class="c-ele">子要素</div>
				</div>
				<div class="col-xs-6 col-sm-4 col-md-3">
					<div class="c-ele">子要素</div>
				</div>
			</div>
	</div>
	<div class="ele col-xs-12 col-sm-12 col-md-4">
			<div class="row">
				<div class="c-ele col-xs-2 col-sm-3 col-md-2">子要素</div>
				<div class="c-ele col-xs-8 col-sm-4 col-md-8">子要素</div>
				<div class="c-ele col-xs-2 col-sm-5 col-md-2">子要素</div>
			</div>
	</div>
</div>

デモ2

カラムの削除・表示

ブレークポイントに応じたカラム数の変更だけでなく、削除・表示も行えます。その場合は削除や表示をしたい要素に.hidden-○.visible-○のクラスを付与します。○の中にはxs,sm,md,lgのいずれかを指定します。

<div class="row">
    <div class="col-xs-12 hidden-xs col-sm-6 col-md-4 visible-md"><div class="ele">要素</div></div>
        <div class="col-xs-12 col-sm-6 col-md-4"><div class="ele">要素</div></div>
    <div class="col-xs-12 col-sm-12 col-md-4"><div class="ele">要素</div></div>
</div>

デモ3

上記だと、要素に.hidden-xs.visible-mdのクラスを付与したことでデバイス幅が992px以下までは削除された状態が続き、992px以上になると表示されます。

カラムのオフセット表示

カラムを1つや2つ空けて配置させたいときはオフセットで実現させることが出来ます。その場合は、下記のようにカラムの合計がカラム数とオフセット数(空白)を合わせて12になるように指定します。
また、あるブレークポイントでオフセットを解除することも出来、例えばPC以上で解除したい場合は、col-md-offset-0と記述することで可能となります。

<div class="row">
    <div class="col-xs-12 col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-0"><div class="ele">要素</div></div>
        <div class="col-xs-12 col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-0"><div class="ele">要素</div></div>
    <div class="col-xs-12 col-sm-12 col-md-4"><div class="ele">要素</div></div>
</div>

デモ4

カラムのプッシュプル

カラムの順序をデバイスに応じて入れ替えたい場合はプッシュプルで実現させます。

<div class="row">
    <div class="col-xs-12 col-sm-3 col-md-4 col-md-push-8"><div class="ele">要素1</div></div>
        <div class="col-xs-12 col-sm-9 col-md-6 col-md-pull-4"><div class="ele">要素2</div></div>
    <div class="col-xs-12 col-sm-12 col-md-2 col-md-pull-4"><div class="ele">要素3</div></div>
</div>

デモ5

デモではデバイスがPC以上で1番目の要素が3番目の位置に、2番目の要素が1番目の位置、3番目の要素が2番目の位置へそれぞれ移動します。push-○は右へ、pull-○は左に移動します。○には移動する値を入れます。

以上です。