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

サイズユーティリティ(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" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</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; background-color: rgba(255,0,0,0.1);">
	<div class="h-25 d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
	<div class="h-50 d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
	<div class="h-75 d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
	<div class="h-100 d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
	<div class="h-auto d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>
【設定】
  • 高さの設定をしたい要素に .h-{%} を入れる(.h-{%} は上記「高さの種類」から選択)

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

最大幅100%の設定

必要に応じて max-width: 100%; ユーティリティも使用可能。

見本
PlaceholderMax-width 100%

.mw-100 で表示

サンプル画像

.img-fluid で表示(参考)

サンプル画像
設定例
<img src="..." class="mw-100" width="1200" height="250" alt="...">
【設定】
  • 要素に .mw-100 を入れることで、その要素に簡単に max-width: 100% の設定が可能
【注意】
  • 同要素(<img> など)に height のサイズ設定をしている場合、.img-fluidレスポンシブイメージ)と違い、高さは自動調整されない

最大高100%の設定

同様に max-height: 100%; ユーティリティーも使用可能。

見本
Max-height 100%:
.mh-100
設定例 ※背景色の設定付き
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
	<div class="mh-100" style="width: 140px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>
【設定】
  • 要素に .mh-100 を入れることで、その要素に簡単に max-height: 100% の設定が可能

 

ビューポートを基準にする(Relative to the viewport)

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

設定例
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</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)
		),