メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

サイズユーティリティ（Sizing）

幅と高さのユーティリティを使用して、要素を簡単に幅広または背高に作成。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目

親要素を基準にする（Relative to the parent）

幅と高さのユーティリティは scss/_utilities.scss のユーティリティAPIで生成。デフォルトでは、values に 25%, 50%, 75%, 100%, auto がサポートされている。さまざまなユーティリティを生成する必要がある場合はこれらの値をご変更下さい。

割合幅の設定（Width）

幅の種類見やすいよう色と枠を付けています
Width 25%：.w-25
Width 50%：.w-50
Width 75%：.w-75
Width 100%：.w-100
Width auto：.w-auto
設定例
<div class="w-25 p-3">...</div>
【設定】
  • 幅の設定をしたい要素に .w-{value}（上記の「幅の種類」から選択）を入れる
    • {value} は、25, 50, 75, 100, auto のいずれかを選択

割合高の設定

高さの種類 見やすいよう色と枠を付けています
Height 25%：
.h-25
Height 50%：
.h-50
Height 75%：
.h-75
Height 100%：
.h-100
Height auto：
.h-auto
設定例
<div style="height: 100px;">
  <div class="h-25 d-inline-block align-top">...</div>
</div>
【設定】
  • 高さの設定をしたい要素に .h-{value}（上記の「高さの種類」から選択）を入れる
    • {value} は、25, 50, 75, 100, auto のいずれかを選択

また、必要に応じて max-width と max-height ユーティリティを使用。

最大幅100%の設定

必要に応じて max-width: 100% ユーティリティも使用できる。

見本 見やすいよう色と枠を付けています
Max-width 100%：.mw-100
設定例
<div style="width: 50%; height: 100px;">
  <div class="mw-100" style="width: 200%;">Max-width 100%</div>
</div>
【設定】
  • 要素に .mw-100 を入れることで、その要素に簡単に max-width: 100% の設定が可能
【注意】
  • 同要素（<img> など）に height のサイズ設定をしている場合、.img-fluid（レスポンシブイメージ）と違い、高さは自動調整されない

最大高100%の設定

同様に max-height: 100% ユーティリティも使用できる。

見本 見やすいよう色と枠を付けています
Max-height 100%：
.mh-100
設定例
<div style="height: 100px;">
  <div class="mh-100" style="width: 140px; height: 200px;">...</div>
</div>
【設定】
  • 要素に .mh-100 を入れることで、その要素に簡単に max-height: 100% の設定が可能

ビューポートを基準にする（Relative to the viewport）

ユーティリティを使用して、ビューポートを基準に幅と高さを設定。

設定例
最小幅がビューポート100%<div class="min-vw-100">...</div>
最小高がビューポート100%<div class="min-vh-100">...</div>
ビューポートの幅100%<div class="vw-100">...</div>
ビューポートの高さ100%<div class="vh-100">...</div>
【設定】
  • 最小幅がビューポート100%：.min-vw-100（min-width: 100vw）
  • 最小高がビューポート100%：.min-vh-100（min-height: 100vh）
  • ビューポートの幅100%：.vw-100（width: 100vw）
  • ビューポートの高さ100%：.vh-100（height: 100vh）

CSS

SassユーティリティAPI（Sass utilities API）v5.0.0-beta3追加、v5.3.0ユーティリティAPIより名称変更

サイズユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定
scss/_utilities.scss 内 utils-sizing の設定"width": (
  property: width,
  class: w,
  values: (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  )
),
"max-width": (
  property: max-width,
  class: mw,
  values: (100: 100%)
),
"viewport-width": (
  property: width,
  class: vw,
  values: (100: 100vw)
),
"min-viewport-width": (
  property: min-width,
  class: min-vw,
  values: (100: 100vw)
),
"height": (
  property: height,
  class: h,
  values: (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  )
),
"max-height": (
  property: max-height,
  class: mh,
  values: (100: 100%)
),
"viewport-height": (
  property: height,
  class: vh,
  values: (100: 100vh)
),
"min-viewport-height": (
  property: min-height,
  class: min-vh,
  values: (100: 100vh)
),