作成日

2015/07/13

最終更新

2017/11/18

記事区分

一般公開

すべての要素の入れ物であるコンテナ要素

公式ドキュメントの一番最初に記載されている container はすべての要素の入れ物です。コンテンツ全体を container で囲みます。container には四種類の幅があります。container の左右にはマージンが作られます。入れ子にすることはできません。4 パターンしかないためピクセル単位のレイアウトを組みやすいという特長があります。基準値は bootstrap のカスタマイズによって変更可能です。

768px 未満 (Extra small; スマートフォン) → 自動で画面一杯の幅になる
768px 以上 992px 未満 (Small; タブレット) → 750px で固定
992px 以上 1200px 未満 (Medium; 一般的な PC) → 970px で固定
1200px 以上 (Large; 高解像度 PC) → 1170px で固定

以下のように利用します。

<body>
  <div class="container" style="background-color: #fafafa;">
    <p>コンテンナの中身</p>
  </div>
</body>

グリッドレイアウト

コンテナを 12 分割して考えます。一行全体を row クラスで囲みます。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6" style="background-color: #f00;">A</div>
    <div class="col-xs-6" style="background-color: #0f0;">B</div>
  </div>
</div>

数値によって横幅を指定します。

col-xs-1 : 1/12
col-xs-2 : 2/12
col-xs-12 : 12/12

row クラスは入れ子にできます。やはり 12 分割です。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6" style="background-color: #f00;">A</div>
    <div class="col-xs-6" style="background-color: #0f0;">
      <div class="row">
        <div class="col-xs-4" style="background-color: #00f;">B-1</div>
        <div class="col-xs-4" style="background-color: #00f;">B-2</div>
        <div class="col-xs-4" style="background-color: #00f;">B-3</div>
      </div>
    </div>
  </div>
</div>

左にオフセットを持たせる (右はできない)

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6" style="background-color: #f00;">A</div>
    <div class="col-xs-offset-1 col-xs-5" style="background-color: #0f0;">B</div>
  </div>
</div>

レイアウトをずらす

右にずらす (push) または左にずらす (pull)

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 col-xs-push-6" style="background-color: #f00;">A</div>
    <div class="col-xs-6 col-xs-pull-6" style="background-color: #0f0;">B</div>
  </div>
</div>

画面幅に応じて処理を切り替える

col-xs* は ExtraSmall 以上に適用されます。col-sm* は col-xs* よりも優先度が高く Small 以上に適用されます。col-md* および col-lg* も同様です。

ExtraSmall のブラウザ幅になると二段組みから一段組みになる例

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-12 col-sm-6" style="background-color: #f00;">A</div>
    <div class="col-xs-12 col-sm-6" style="background-color: #0f0;">B</div>
  </div>
</div>

Small 以上になると左右反転する例

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 col-sm-push-6" style="background-color: #f00;">A</div>
    <div class="col-xs-6 col-sm-pull-6" style="background-color: #0f0;">B</div>
  </div>
</div>

表示/非表示の切り替え

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 hidden" style="background-color: #f00;">A</div>
    <div class="col-xs-6 show" style="background-color: #0f0;">B</div>
  </div>
  <div class="row">
    <div class="col-xs-6 invisible" style="background-color: #f00;">A</div>
    <div class="col-xs-6 show" style="background-color: #0f0;">B</div>
  </div>
</div>

show → 既定値
hidden → 存在が消えて詰められる
invisible → 存在は消えずに見えなくなるだけ。詰められない

画面幅で判断

Small のときに「だけ」hidden。Medium などは該当しないことに注意。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 hidden-sm" style="background-color: #f00;">A</div>
    <div class="col-xs-6" style="background-color: #0f0;">B</div>
  </div>
</div>

Small のときに「だけ」visible (= not hidden) となります。該当しないときは invisible にはならないことに注意してください。hidden になり詰められます。Medium などは該当しないことにも注意します。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6 visible-sm-block" style="background-color: #f00;">A</div>
    <div class="col-xs-6" style="background-color: #0f0;">B</div>
  </div>
</div>

visible-*-block → display: block; に相当
visible-*-inline → display: inline; に相当
visible-*-inline-block → display: inline-block; に相当

表示モードで判断

hidden-print → 印刷時に hidden
visible-print-block → 印刷時に not hidden (block)
visible-print-inline → 印刷時に not hidden (inline)
visible-print-inline-block → 印刷時に not hidden (inline-block)

画像サイズをレスポンシブに変化させて枠におさめる

グリッドレイアウトの列には 15px のパディングが既定値となっています。例えば padding 0 を指定することで対応します。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="col-xs-6" style="padding:0;"><img class="img-responsive" src="path/to/picture.jpg"></div>
    <div class="col-xs-6" style="background-color: #0f0;">B</div>
  </div>
</div>

jun

Pythonでデータ解析と自動化ツールを開発しています。DjangoでのWeb開発も得意です！

記事の執筆者にステッカーを贈る

有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、記事の読者は、執筆者に有料のステッカーを贈ることができます。

さらに詳しく →

Feedbacks

ログインするとコメントを投稿できます。

CSS 設計に関するヒント
CSS は構造化が難しくスタイルを宣言していくだけで目的が達成できてしまいます。上書きの繰り返しによって肥大化しないための設計ヒントをまとめます。詳細度の高騰が発生した CSS は破綻しやすい CSS の詳細度はルーティングテーブルのロンゲストマッチのようなものです。一致度の高いとされるセレクタで指定したスタイルが優先的に適用されます。同じ詳細度の場合は後から指定したスタイルで上書かれて適用され...
みみ10/7/2021に更新
0
- CSS
フォーム入力 (Bootstrap 3)
フォーム関連の Bootstrap 3 の機能をコード例とともに列挙します。公式ページは CSS/Forms です。JavaScript には依存せずに動作します。標準的なレイアウト <div class="container"></div> に含めて使用します。まとまりごとに form-group で囲います。 <form> <!-- 一行入力 -...
からふるねこ11/24/2017に更新
0
- CSS
Sass チートシート
Sass (Syntactically Awesome Stylesheets) のチートシートです。インデントを多用した SASS 記法ではなく、広く普及している SCSS 構文の Sass を対象とします。継承 (extend) 基本 .class1 { background-color: #f00; } .class2 { @extend .class1; colo...
ピカピカ10/7/2021に更新
0
- CSS
CSS で部品を装飾 (Bootstrap 3)
公式ドキュメントのうち JavaScript に依存せず CSS だけで部品を装飾する Bootstrap 3 の機能をコード例とともに列挙します。公式ページは CSS Components および CSS です。グリフアイコン [使用できるアイコン一覧](http://getbootstrap.com/components/#glyphicon
からふるねこ10/7/2021に更新
0
- CSS
Bootstrap 3 公式ドキュメントの利用例
Bootstrap のメジャーバージョンは 2015-2-01(Sun) 現在 3 であり、最も人気のある HTML, CSS, JS のフレームワークです。Grid system という、いわゆるレスポンシブデザインを行うために便利な機能も利用できます。デザインの独自性にこだわらない業務アプリケーションなどを短期間で作る場合にも便利ですし、インターネットに公開する独自性が求められるアプリケーショ...
HARUTO11/17/2017に更新
0
- CSS

グリッドレイアウトでレスポンシブ Web デザイン (Bootstrap 3)

目次