Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Breakpoints (ブレイクポイント)

ブレイクポイントは、デバイスやビューポートのサイズによってレイアウトがどのようにレスポンシブに変化するかを示すトリガーです。

目次

Core concepts

Available breakpoints

Bootstrapには6つのデフォルトのブレークポイントがあり、grid tiers と呼ばれることもあり、責任を持ってビルドするためのものです。これらのブレークポイントは、ソースのSassファイルを使用している場合、カスタマイズすることができます。

Breakpoint Class infix Dimensions
X-Small None 0–576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

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

これらのブレークポイントは Sass でカスタマイズすることができ、_variables.scss スタイルシートの Sass マップで見つけることができます。

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

Sassのマップや変数を変更する方法の詳細と例については、 the Sass section of the Grid documentation を参照してください。

Media queries

Bootstrapはモバイルファーストで開発されているので、レイアウトやインターフェースのための賢明なブレークポイントを作成するために、media queries を使用しています。これらのブレークポイントは、ほとんどがビューポートの最小幅に基づいており、ビューポートの変化に合わせて要素をスケールアップすることができます。

Min-width

レイアウト、グリッドシステム、およびコンポーネントのために、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 mixins は、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) { ... }

Max-width

与えられた画面サイズ以下 を指定することもできます。

// 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;
  }
}

これらの mixins は、宣言されたブレークポイントを取り、そこから .02px を差し引き、max-width として使用します。例えば、以下のようになります。

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.

Single breakpoint

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

@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) { ... }

Between breakpoints

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

@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) { ... }