メインコンテンツへスキップ ドキュメントナビゲーションへスキップ
GitHubで表示

ブレークポイント

ブレークポイントは、Bootstrapでデバイスまたはビューポートのサイズ全体でレスポンシブレイアウトがどのように動作するかを決定する、カスタマイズ可能な幅です。

このページについて

コアコンセプト

  • ブレークポイントは、レスポンシブデザインの構成要素です。特定のビューポートまたはデバイスサイズでレイアウトを調整できるタイミングを制御するために使用します。

  • メディアクエリを使用して、ブレークポイントごとにCSSを設計します。メディアクエリは、ブラウザとオペレーティングシステムのパラメータのセットに基づいて条件付きでスタイルを適用できるCSSの機能です。メディアクエリでは、min-widthを最も一般的に使用します。

  • モバイルファースト、レスポンシブデザインが目標です。BootstrapのCSSは、最小のブレークポイントでレイアウトが機能するように最小限のスタイルを適用し、より大きなデバイス向けにデザインを調整するスタイルをレイヤー化することを目的としています。これにより、CSSが最適化され、レンダリング時間が改善され、訪問者に優れたエクスペリエンスが提供されます。

利用可能なブレークポイント

Bootstrapには、レスポンシブに構築するための、グリッド層とも呼ばれる6つのデフォルトのブレークポイントが含まれています。これらのブレークポイントは、ソースSassファイルを使用している場合にカスタマイズできます。

ブレークポイント クラスのインフィックス 寸法
エクストラスモール なし <576px
スモール sm ≥576px
ミディアム md ≥768px
ラージ lg ≥992px
エクストララージ xl ≥1200px
エクストラエクストララージ xxl ≥1400px

各ブレークポイントは、幅が12の倍数であるコンテナを快適に保持できるように選択されています。ブレークポイントは、一般的なデバイスサイズとビューポート寸法のサブセットも表しています。すべてのユースケースやデバイスを具体的にターゲットにしているわけではありません。代わりに、これらの範囲は、ほぼすべてのデバイス上に構築するための強力で一貫性のある基盤を提供します。

これらのブレークポイントはSassを介してカスタマイズできます。_variables.scssスタイルシートのSassマップにあります。

scss/_variables.scss 
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Sassマップと変数を変更する方法の詳細と例については、グリッドドキュメントのCSSセクションを参照してください。

メディアクエリ

Bootstrapはモバイルファーストとして開発されているため、レイアウトとインターフェースのために適切なブレークポイントを作成するために、いくつかのメディアクエリを使用しています。これらのブレークポイントは、主に最小ビューポート幅に基づいており、ビューポートが変化するにつれて要素をスケールアップできます。

最小幅

Bootstrapでは、レイアウト、グリッドシステム、およびコンポーネントのソースSassファイルで、主に次のメディアクエリ範囲（またはブレークポイント）を使用しています。

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

これらのSassミックスインは、Sass変数で宣言された値を使用して、コンパイルされたCSSに変換されます。例：

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

最大幅

反対方向（指定された画面サイズ以下）に進むメディアクエリを時々使用します。

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

これらのミックスインは、宣言されたブレークポイントを取得し、そこから.02pxを減算して、それらをmax-widthの値として使用します。例：

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
なぜ.02pxを減算するのですか？ブラウザは現在、範囲コンテキストクエリをサポートしていないため、min-およびmax-プレフィックスの制限と、より高い精度を持つ値を使用することにより、（たとえば、高dpiデバイスの特定の条件下で発生する可能性のある）小数幅のビューポートを回避しています。

単一のブレークポイント

最小および最大のブレークポイント幅を使用して、画面サイズの単一のセグメントをターゲットにするためのメディアクエリとミックスインもあります。

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

たとえば、@include media-breakpoint-only(md) { ... }は、次のようになります。

@media (min-width: 768px) and (max-width: 991.98px) { ... }

ブレークポイント間

同様に、メディアクエリは複数のブレークポイント幅にまたがる場合があります。

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

その結果

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }