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

ブレークポイント(Breakpoints) v5.0.0-alpha1階層追加 v5.0.0-alpha1概要より分離

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

基本のコンセプト(Core concepts)

  • ブレークポイントは、レスポンシブデザインの構成要素である。それらを使用して、特定のビューポートやデバイスサイズでレイアウトをいつ調整できるかを制御。
  • メディアクエリを使用して、ブレークポイントでCSSを構築。メディアクエリはCSSの機能であり、ブラウザとOSのパラメータのセットに基づいてスタイルを条件付きで適用。メディアクエリでは、通常 min-width を使用。
  • モバイル・ファーストのレスポンシブなデザインにするのが目標。BootstrapのCSSは、最小限のスタイルを適用してレイアウトを極小のブレークポイントで機能させることを目的としている。次にスタイルを重ねて、より大きなデバイス向けにそのデザインを調整。これによりCSSが最適化され、レンダリング時間が改善され、訪問者に素晴らしい体験が提供される。

 

利用可能なブレークポイント(Available Breakpoints)v5.0.0-alpha1一部追加

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

ブレークポイント クラスの接頭辞 ビューポートの範囲
極小(X-Small) なし <576px
小(Small) sm ≥576px
中(Medium) md ≥768px
大(Large) lg ≥992px
特大(Extra large) xl ≥1200px
超特大(Extra extra large)v5.0.0-alpha1追加 xxl ≥1400px

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

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

デフォルトの設定
scss/_variables.scss 内 grid-breakpoints の設定$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Sassマップと変数を変更する方法の詳細と例については、グリッドのSassの項目に記載。

 

メディアクエリ(Media queries)v5.0.0-alpha1一部設定変更

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

最小幅(Min-width)

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

設定例
custom.scss// 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) { ... }
@include media-breakpoint-up(xxl) { ... }

// 使用方法

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

これらのSass mixinは、Sass変数で宣言された値を使用して、コンパイルされたCSSで変換される。例えば:

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

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

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

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

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

/* 超特大デバイス (よりワイドな・デスクトップ, 1400px 以上) */
@media (min-width: 1400px) { ... }
【変更履歴】
  • 【v5.0.0-alpha1】
    • xxlブレークポイントが追加されたので、xxlブレークポイントのメディアクエリ(media-breakpoint-up(xxl))が追加

最大幅(Max-width)

逆の方向(指定された画面サイズ以下)のメディアクエリを使用する場合:

設定例
custom.scss// xsブレークポイントは実質的に `@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) { ... }

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

これらのmixinは、宣言されたブレークポイントを取得し、.02pxを差し引いて、最大幅の値として使用。例えば:

変換後のCSS
custom.css/* `xs` はルールセットのみを返し、メディアクエリは返さない */
/* ... { ... } */

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

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

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

/* `xl` は大デバイス(デスクトップ, 1200px 未満)に適用 */
@media (max-width: 1199.98px) { ... }

/* `xxl` は特大デバイス(ワイド・デスクトップ, 1400px 未満)に適用 */
@media (max-width: 1399.98px) { ... }
【変更履歴】
  • 【v5.0.0-alpha1】
    • media-breakpoint-down() は次のブレークポイントではなく、そのブレークポイント自体を使用することになったため、media-breakpoint-down(xs) を廃止し、xlブレークポイントのメディアクエリ(media-breakpoint-down(xl))を追加
    • xxlブレークポイントが追加されたので、xxlブレークポイントのメディアクエリ(media-breakpoint-down(xxl))も追加

単一のブレークポイント(Single breakpoint)

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

設定例
custom.scss@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) { ... }は次のようになる。

custom.css@media (min-width: 768px) and (max-width: 991.98px) { ... }
【変更履歴】
  • 【v5.0.0-alpha1】
    • xxlブレークポイントが追加されたので、xxlブレークポイントのメディアクエリ(media-breakpoint-only(xxl))が追加

ブレークポイント間(Between breakpoints)

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

設定例
custom.scss@include media-breakpoint-between(md, xl) { ... }

その結果:

変換後のCSS
custom.css/* 例 */
/* 中デバイスから特大デバイスまでのスタイルの適用 */
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
【変更履歴】
  • 【v5.0.0-alpha1】
    • media-breakpoint-between() mixinの2番目のパラメーターは、次のブレークポイントではなく、そのブレークポイント自体を使用することになった
    • xxlブレークポイントが追加されたので、パラメーターの設定に xxl が追加