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

サイズユーティリティ(Sizing)

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

親要素を基準にする(Relative to the parent)

幅と高さのユーティリティは scss/_utilities.scssユーティリティAPIで生成。デフォルトでは、values25%, 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-{%} を入れる(.w-{%} は上記「幅の種類」から選択)

割合高の設定

高さの種類 見やすいよう色を付けています
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-{%} を入れる(.h-{%} は上記「高さの種類」から選択)

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

最大幅100%の設定

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

見本
PlaceholderMax-width 100%

.mw-100 で表示

サンプル画像

.img-fluid で表示(参考)

サンプル画像
設定例
<img src="..." alt="..." class="mw-100" width="1200" height="250">
【設定】
  • 要素に .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-100min-width: 100vw
  • 最小高がビューポート100%:.min-vh-100min-height: 100vh
  • ビューポートの幅100%:.vw-100width: 100vw
  • ビューポートの高さ100%:.vh-100height: 100vh

 

Sass v5.0.0-beta3追加

ユーティリティAPI(Utilities 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)
    ),