合同会社アルティマシステム
Bootstrap3

第4回目 Bootstrap offset push pullを使ってみよう!

前回の復習

Bootstrapを使用してレスポンシブサイトを作成する場合は、第3回目で紹介したグリッドシステムの12と画面サイズのxs・sm・md・lgが重要になります。
第4回目は、.row.col-offset push pullについて紹介をしていきます。
こちらの記事は、初心者の方に向けての記事となっております。
Macの環境を前提に紹介をしています。

offsetについて

.col-にはoffsetという機能があります。

< 例 > .col-にoffsetがついたときのclass名

  • .col-xs-offset-1
  • .col-sm-offset-1
  • .col-md-offset-1
  • .col-lg-offset-1
12で均等に分けられているグリッドシステムのカラムを1つ分、左から右に押し出すイメージです。

< 参考 ① >

offset01
<div class="row">
    <div class="col-xs-12 col-xs-offset-1">.col-xs-12 .col-xs-offset-1</div>
</div>
< 参考 ① >は.rowの範囲からカラム(12番目)が飛び出ているので、.rowの範囲にカラムを収まるようにしましょう。 classの.col-xs-12とcol-xs-offset-1の数字を足して考えてみるとわかりやすいです。

< 参考 ① >の場合は、12+1=13になるため.rowの範囲からカラムが飛び出してしまうということになります。

< 参考 ② >

offset02
<div class="row">
    <div class="col-xs-11 col-xs-offset-1">.col-xs-11 .col-xs-offset-1</div>
</div>
< 参考 ② >は.col-xs-11と.col-xs-offset-1(11+1=12)カラムが12になるため.rowの範囲に収まっています。

offsetの中央寄せ

サイト作成中にカラムを中央寄せにしたいことがよくあると思います。
< 参考 ③ >のようにoffsetを使用すれば、簡単に中央寄せにすることもできます!

< 参考 ③ >

offset03
<div class="row">
    <div class="col-xs-10 col-xs-offset-1">.col-xs-10 .col-xs-offset-1</div>
</div>
offset04
<div class="row">
    <div class="col-xs-8 col-xs-offset-2">.col-xs-8 .col-xs-offset-2</div>
</div>
offset05
<div class="row">
    <div class="col-xs-6 col-xs-offset-3">.col-xs-6 .col-xs-offset-3</div>
</div>
offset06
<div class="row">
    <div class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div>
</div>
offset07
<div class="row">
    <div class="col-xs-2 col-xs-offset-5">.col-xs-2 .col-xs-offset-5</div>
</div>

offsetを使用するときの注意点

.col-は、小さいサイズの指定が優先されて反映されます。

< 例 >

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
このように.col-xs-12のときにsm・md・lgサイズも12の場合は、.col-xs-12だけを指定します。

< 例 >

<div class="row">
    <div class="col-xs-12">.col-xs-12</div>
</div>
offsetも小さいサイズの指定が優先されて反映されます。

< 例 >

<div class="row">
    <div class="col-xs-10 col-xs-offset-1 col-md-8">.col-xs-10 .col-xs-offset-1 .col-md-8</div>
</div>

.col-xs-10 .col-xs-offset-1 .col-md-8

.col-xs-10 .col-xs-offset-1のため、smサイズのとき.col-のサイズは、10とoffset-1が引き継がれます。
mdサイズのとき.col-のサイズは、8に変更され、offset-1は引き継がれます。
lgサイズのとき.col-のサイズは、8とoffset-1が引き継がれます。
mdとlgサイズのときに、offset-1を引き継がせない場合はclassに.col-md-offset-0を追加してください。

< 例 >

<div class="row">
    <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-0">.col-xs-10 .col-xs-offset-1 .col-md-8 .col-md-offset-0</div>
</div>

.col-xs-10 .col-xs-offset-1 .col-md-8 .col-md-offset-0

push pull カラムの順序

.col-には、push pullという機能があります。

< 例 > .col-にpushがついたときのclass名

  • .col-xs-push-1
  • .col-sm-push-1
  • .col-md-push-1
  • .col-lg-push-1

< 例 > .col-にpullがついたときのclass名

  • .col-xs-pull-1
  • .col-sm-pull-1
  • .col-md-pull-1
  • .col-lg-pull-1
pushとpullを使用すればカラムの順序を変更することができます。
< 参考 ④ >は、pushとpullを使用せずに.col-xs-6(赤).col-xs-6(青)を指定しています。

< 参考 ④ >

<div class="row">
    <div class="col-xs-6">赤</div>
    <div class="col-xs-6">青</div>
</div>
< 参考 ⑤ >は、.col-xs-6 .col-xs-push-6(赤).col-xs-6 .col-xs-pull-6(青) を指定しています。

< 参考 ⑤ >

<div class="row">
    <div class="col-xs-6 col-xs-push-6">赤</div>
    <div class="col-xs-6 col-xs-pull-6">青</div>
</div>
pushとpullを使用するとの順序が変わり、が左側にきています。

まとめ・次回予告

offset push pullについて紹介をしました。offsetの中央寄せは、本当に便利だと思います!
次回は.rowの入れ子について紹介をしていきます!

関連投稿

第7回目 Bootstrap headerをレスポンシブ対応にしてみよう!

前回の復習 前回は、headerの基本となるサイト名とリンクを作成しました。 第7回目は、前回作成したheaderをレスポンシブ対応にする方法の紹介をします。 最後にheaderを固定する方法の紹介もします! こ...

第6回目 Bootstrap headerを作成してみよう!

headerについて 第6回目からは、サイトのheaderを作成する方法についての紹介をしていきます。 サイトの1番上に表示されるheaderは、デザインも動きもしっかり作りこみたいですね! レスポンシブサイトのhea...

第5回目 Bootstrap .rowの入れ子!

前回の復習 前回は、offset push pullについての紹介をしました。 コンテンツの細かい配置に迷ったときにoffset push pullを使用すると全体のバランスがよくなります。 第5回目は、.rowの入れ子についての紹...

第2回目 実際にBootstrapを動かしてみよう!

前回の復習 前回は、Bootstrapのダウンロード方法・ファイル・フォルダの紹介をしました。 第2回目は、Bootstrapの読み込み方・実際に動かすところまでを紹介をします。 読み込みってなんだ?と、少しややこ...

第1回目 簡単にホームページが作れるBootstrap!

Bootstrapについて Bootstrapとは、CSSフレームワークの1つです。Bootstrapを使用すれば難しいことを考えずに初心者でも簡単にホームページを作成できます! スマートフォン・タブレットに対応のレスポンシ...