合同会社アルティマシステム
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-の使い方について更に詳しく紹介をしていきます!

関連投稿

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

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

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

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

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

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

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

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

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

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