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

第3回目 Bootstrap グリッドシステム!

Bootstrapのコンポーネント

第3回目は、.container(.container-fluid) .row .col-について紹介をしていきます。
Bootstrapを使用する場合は、最初に.container .row .col-の仕組みを理解しておきましょう!
こちらの記事は、初心者の方に向けての記事となっております。
Macの環境を前提に紹介をしています。

グリッドシステム

グリッドシステムとは、< 参考 ① >のようにサイトの横幅を1〜12まで均等に決められていることです。

< 参考 ① >

グリッドジステム
グリッドシステムをうまく活用すれば、サイトのズレやガタつきがなくなります。

.container .container-fluid

.container .container-fluid は、.row .col-を囲うclassです。
.containerは、画面のサイズによって横幅が指定されています。

< 参考 ② > .containerの横幅のcssです。

@media (min-width: 1200px)
.container {
    width: 1170px;
}

@media (min-width: 992px)
.container {
    width: 970px;
}

@media (min-width: 768px)
.container {
    width: 750px;
}

< 参考 ③ > .containerのcssです。

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.container-fluidは、画面の横幅が指定されていないため、画面全体に広がります。

< 参考 ④ > .container-fluidのcssです。

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row

.rowとは、.col-を囲うclassです。

< 参考 ⑤ > .rowのcssです。

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col-

.col-には、xs・sm・md・lgの4種類のサイズがあります。
  • xs:768px未満の画面に対応
  • sm:768px以上の画面に対応
  • md:992px以上の画面に対応
  • lg:1200px以上の画面に対応
画面のサイズに合わせて.col-のサイズも変わっていきます。
< 参考 ① >で紹介をしたグリッドシステムの1〜12を思い出してみてください。 同じように.col-にも1〜12までのclassがあります。
  • .col-xs-1
  • .col-xs-2
  • .col-xs-3
  • .col-xs-4
  • .col-xs-5
  • .col-xs-6
  • .col-xs-7
  • .col-xs-8
  • .col-xs-9
  • .col-xs-10
  • .col-xs-11
  • .col-xs-12
htmlに書くと、< 参考 ⑥ >のようになります。

< 参考 ⑥ >

<div class="row">
    <div class="col-xs-4 col-sm-6 col-md-1">1</div>
    <div class="col-xs-4 col-sm-6 col-md-1">2</div>
    <div class="col-xs-4 col-sm-6 col-md-1">3</div>
    <div class="col-xs-4 col-sm-6 col-md-1">4</div>
    <div class="col-xs-4 col-sm-6 col-md-1">5</div>
    <div class="col-xs-4 col-sm-6 col-md-1">6</div>
    <div class="col-xs-4 col-sm-6 col-md-1">7</div>
    <div class="col-xs-4 col-sm-6 col-md-1">8</div>
    <div class="col-xs-4 col-sm-6 col-md-1">9</div>
    <div class="col-xs-4 col-sm-6 col-md-1">10</div>
    <div class="col-xs-4 col-sm-6 col-md-1">11</div>
    <div class="col-xs-4 col-sm-6 col-md-1">12</div>
</div>
.rowの中に入る最大の数字が12というのがポイントです!

< 参考 ⑦ >

1

2

3

4

5

6

7

8

9

10

11

12

< 参考 ⑦ >は、画面サイズがlg・mdのときは、横1列に1〜12までが表示されています。 このとき適用されているclassは.col-md-1となり、グリッドシステムの12の中に.col-md-1がそれぞれ1つずつ入っているということになります。

画面サイズがsmのときは、横2列に1〜12までが表示されています。 このとき適用されているclassは.col-sm-6となり、グリッドシステムの12の中に.col-sm-6がそれぞれ2つずつ入っているということになります。

画面サイズがのときは、横3列に1〜12までが表示されています。 このとき適用されているclassは.col-xs-4となり、グリッドシステムの12の中に.col-xs-4がそれぞれ3つずつ入っているということになります。

まとめ・次回予告

グリッドシステムについて紹介をしました。 ポイントは、12xs・sm・md・lgです! 次回は、.col-の使い方について更に詳しく紹介をしていきます!

関連投稿

第8回目 Bootstrap footerを作成してみよう!

前回の復習 前回は、headerのレスポンシブ対応・固定する方法について紹介をしました。 第8回目は、footerを作成する方法について紹介をします。 こちらの記事は、初心者の方に向けての記事となっており...

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

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

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

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

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

前回の復習 Bootstrapを使用してレスポンシブサイトを作成する場合は、第3回目で紹介したグリッドシステムの12と画面サイズのxs・sm・md・lgが重要になります。 第4回目は、.rowと.col-のoffset push pullに...

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

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