メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

概要(Overview)

Bootstrapには、包括コンテナ、強力なグリッドシステム、柔軟なメディア・オブジェクト、レスポンシブ・ユーティリティクラスなど、プロジェクトをレイアウトするためのいくつかのコンポーネントとオプションが組み込まれている。

コンテナ(Containers)

コンテナは、Bootstrapの最も基本的なレイアウト要素であり、デフォルトのグリッドシステムを使用する場合は必須。コンテナは、その中にコンテンツを囲み、余白の調整、そして(時には)中央寄せをするのに使用。コンテナは入れ子も可能だが、ほとんどのレイアウトは入れ子になったコンテナを必要としない。

Bootstrapには3つの異なるコンテナがある。

  • .container は、各レスポンシブ・ブレークポイントで最大幅を設定
  • .container-fluid は、全てのブレークポイントで width: 100%
  • .container-{breakpoint} は、指定されたブレークポイントまで width: 100%

以下の表は、各レスポンシブ・コンテナの各ブレークポイントでの max-width(最大幅)について、従来の .container.container-fluid と合わせて比較。

実際の動作は、グリッドの実例で確認すること。

極小
<576px

≥576px

≥768px

≥992px
特大
≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

固定幅のコンテナ(All-in-one)

デフォルトの .container クラスはレスポンシブな固定幅のコンテナとなる。つまり max-width は各ブレークポイントで変わる。

設定例
<div class="container">
	<!-- ココにコンテンツを入れる -->
</div>

【設定】

  • div.container でコンテンツを囲む

全幅のコンテナ(Fluid)

ビューポート幅全体に広がる全幅のコンテナには .container-fluid を使用。

設定例
<div class="container-fluid">
	<!-- ココにコンテンツを入れる -->
</div>

【設定】

  • div.container-fluid でコンテンツを囲む

レスポンシブ・コンテナ(Responsive)v4.4.0新設

レスポンシブ・コンテナはBootstrap v4.4で新しく追加された。指定したブレークポイントに達するまで100%幅のクラスが指定可能。その後、上位の各ブレークポイントで max-width を適用。例えば、.container-smsm ブレークポイントに到達するまで100%幅で、md, lg, xl のブレークポイントではスケールアップされる。

設定例
<div class="container-sm">小のブレークポイントまで幅100%</div>
<div class="container-md">中のブレークポイントまで幅100%</div>
<div class="container-lg">大のブレークポイントまで幅100%</div>
<div class="container-xl">特大のブレークポイントまで幅100%</div>

【設定】

  • div.container-{breakpoint} でコンテンツを囲む

 

レスポンシブ・ブレークポイント(Responsive breakpoints)

Bootstrapは、モバイル・ファーストで開発しているので、レイアウトやインターフェースのためにわかりやすいブレークポイントを作成するために、いくつかのメディアクエリを使用している。これらのブレークポイントは、主に最小のビューポート(表示領域)幅に基づいており、ビューポートの変更などの要素を拡大することが可能。

Bootstrapは、主にレイアウト、グリッドシステム、コンポーネントのために、ソースSassファイルで以下のブレークポイント(メディアクエリの範囲)を使用。

// 極小デバイス(縦向きモバイル, 576px 未満)
// Bootstrapではデフォルトで `xs` のメディアクエリは存在しない

// 小デバイス(横向きモバイル, 576px 以上)
@media (min-width: 576px) { ... }

// 中デバイス(タブレット, 768px 以上)
@media (min-width: 768px) { ... }

// 大デバイス(デスクトップ, 992px 以上)
@media (min-width: 992px) { ... }

// 特大デバイス(ワイド・デスクトップ, 1200px 以上)
@media (min-width: 1200px) { ... }

SassにソースのCSSを記述しているので、すべてのメディアクエリはSassのmixin経由で入手可能:

// `@media(min-width:0){...}`のように、xsブレークポイントに必要な有効なメディアクエリは存在しない
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// 例:min-width:0 で非表示、smブレークポイントで表示
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

時には、逆方向(指定の画面サイズ以下)に進むメディアクエリを使用:

// 極小デバイス(縦向きモバイル, 576px 未満)
@media (max-width: 575.98px) { ... }

// 小デバイス(横向きモバイル, 768px 未満)
@media (max-width: 767.98px) { ... }

// 中デバイス(タブレット, 992px 未満)
@media (max-width: 991.98px) { ... }

// 大デバイス(デスクトップ, 1200px 未満)
@media (max-width: 1199.98px) { ... }

// 特大デバイス(ワイド・デスクトップ)
// 特大のブレークポイントには上限がないので、メディアクエリはなし

繰り返しになるが、これらのメディアクエリはSass mixin経由でも入手可能:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
//幅に上限がないため、xlブレークポイントに必要なメディアクエリは存在しない

//例:mdブレークポイントから下のスタイル
@include media-breakpoint-down(md) {
	.custom-class {
		display: block;
	}
}

最小限のブレークポイント幅と最大限のブレークポイント幅を使用して、画面サイズの1つのセグメントを対象とするメディアクエリとmixinもある。

// 極小デバイス(縦向きモバイル, 576px 未満)
@media (max-width: 575.98px) { ... }

// 小デバイス(横向きモバイル, 576px 以上)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// 中デバイス(タブレット, 768px 以上)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// 大デバイス(デスクトップ, 992px 以上)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// 特大デバイス(ワイド・デスクトップ, 1200px 以上)
@media (min-width: 1200px) { ... }

これらのメディアクエリはSass mixin経由でも入手可能:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

同様に、メディアクエリは複数のブレークポイント幅にまたがることがある:

// 例
// 中型デバイスから超大型デバイスまでのスタイルの適用
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

同じ画面サイズの範囲をターゲットにするためのSass mixinは、次のとおり:

@include media-breakpoint-between(md, xl) { ... }

 

Z-index 4.0.0新設

いくつかのBootstrapのコンポーネントでは、コンテンツを配置するための第3の軸を提供することによってレイアウトを制御するのに役立つCSSプロパティである z-index を利用している。ナビゲーション、ツールチップ、ポップオーバー、モーダルなどを適切にレイヤーするように設計されたBootstrapのデフォルトのz-indexスケールを使用。

これらは、競合を理想的に回避するのに十分な任意の高めの値から始まっている。ツールチップ、ポップオーバー、ナビゲーションバー、ドロップダウン、モーダルなど階層化されたコンポーネント全体で、動作の合理的な一貫性のためこれらの標準セットが必要。100+ や 500+ を使用しなかった理由は特にない。

これらの値のカスタマイズは推奨しない。1つ変えたら、すべて変更する必要がある。

設定例
$zindex-dropdown:      1000 !default;
$zindex-sticky:       1020 !default;
$zindex-fixed:        1030 !default;
$zindex-modal-backdrop:   1040 !default;
$zindex-modal:        1050 !default;
$zindex-popover:       1060 !default;
$zindex-tooltip:       1070 !default;

コンポーネント内の重なり合う境界線(例えば、インプットグループ内のボタンやコントロール)を処理するために、デフォルト、ホバー、アクティブ状態に対しては、1, 2, 3 の低い1桁の z-index 値を使用。ホバー/フォーカス/アクティブでは、兄弟要素との境界線を表示するのに、より高い z-index 値を持つ特定の要素が最前になる。