ユーティリティ

ディスプレイ

ディスプレイクラスを使用して、コンポーネントのdisplayプロパティをレスポンシブに切り替えられます。`display`のすべての可能な値のサブセットのみを意図的にサポートします。

表記方法

クラス名の形式は以下の通りです。

valueの種類は以下の通りです。

%{STYLEGUIDE_PAGE}-d-inline
%{STYLEGUIDE_PAGE}-d-inline
<div class="%{STYLEGUIDE_PAGE}-d-inline %{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">%{STYLEGUIDE_PAGE}-d-inline</div>
<div class="%{STYLEGUIDE_PAGE}-d-inline %{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-info">%{STYLEGUIDE_PAGE}-d-inline</div>
%{STYLEGUIDE_PAGE}-d-block %{STYLEGUIDE_PAGE}-d-block
<span class="%{STYLEGUIDE_PAGE}-d-block %{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">%{STYLEGUIDE_PAGE}-d-block</span>
<span class="%{STYLEGUIDE_PAGE}-d-block %{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-info">%{STYLEGUIDE_PAGE}-d-block</span>

要素の非表示

モバイルフレンドリーな開発を迅速に行うには、レスポンシブ表示クラスを使用して、デバイスごとに要素を表示・非表示にします。

hide on lg and wider screens
hide on screens smaller than lg
<div class="%{STYLEGUIDE_PAGE}-d-lg-none">hide on lg and wider screens</div>
<div class="%{STYLEGUIDE_PAGE}-d-none %{STYLEGUIDE_PAGE}-d-lg-block">hide on screens smaller than lg</div>
Screen size Class
全て非表示 .%{STYLEGUIDE_PAGE}-d-none
xsのみ非表示 .%{STYLEGUIDE_PAGE}-d-none .%{STYLEGUIDE_PAGE}-d-sm-block
smのみ非表示 .%{STYLEGUIDE_PAGE}-d-sm-none .%{STYLEGUIDE_PAGE}-d-md-block
mdのみ非表示 .%{STYLEGUIDE_PAGE}-d-md-none .%{STYLEGUIDE_PAGE}-d-lg-block
lgのみ非表示 .%{STYLEGUIDE_PAGE}-d-lg-none .%{STYLEGUIDE_PAGE}-d-xl-block
xlのみ非表示 .%{STYLEGUIDE_PAGE}-d-xl-none
全て表示 .%{STYLEGUIDE_PAGE}-d-block
xsのみ表示 .%{STYLEGUIDE_PAGE}-d-block .%{STYLEGUIDE_PAGE}-d-sm-none
smのみ表示 .%{STYLEGUIDE_PAGE}-d-none .%{STYLEGUIDE_PAGE}-d-sm-block .%{STYLEGUIDE_PAGE}-d-md-none
mdのみ表示 .%{STYLEGUIDE_PAGE}-d-none .%{STYLEGUIDE_PAGE}-d-md-block .%{STYLEGUIDE_PAGE}-d-lg-none
lgのみ表示 .%{STYLEGUIDE_PAGE}-d-none .%{STYLEGUIDE_PAGE}-d-lg-block .%{STYLEGUIDE_PAGE}-d-xl-none
xlのみ表示 .%{STYLEGUIDE_PAGE}-d-none .%{STYLEGUIDE_PAGE}-d-xl-block

印刷のディスプレイ

印刷の場合は、印刷クラスを使って要素の`display`の値を変更します。

Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
<div class="%{STYLEGUIDE_PAGE}-d-print-none">Screen Only (Hide on print only)</div>
<div class="%{STYLEGUIDE_PAGE}-d-none %{STYLEGUIDE_PAGE}-d-print-block">Print Only (Hide on screen only)</div>
<div class="%{STYLEGUIDE_PAGE}-d-none %{STYLEGUIDE_PAGE}-d-lg-block %{STYLEGUIDE_PAGE}-d-print-block">Hide up to large on screen, but always show on print</div>

Flex

Flexユーティリティを使用して、flexboxの動作を制御できます。

Flex プロパティ

%{STYLEGUIDE_PAGE}-d-flex
%{STYLEGUIDE_PAGE}-d-inline-flex
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">%{STYLEGUIDE_PAGE}-d-flex</div>
<div class="%{STYLEGUIDE_PAGE}-d-inline-flex %{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">%{STYLEGUIDE_PAGE}-d-inline-flex</div>

Flex 方向

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-flex-row">
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-primary">Flex item 1</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-dark">Flex item 2</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-primary">Flex item 3</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-flex-row-reverse">
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-primary">Flex item 1</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-dark">Flex item 2</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-primary">Flex item 3</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-flex-column">
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-primary">Flex item 1</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-dark">Flex item 2</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-primary">Flex item 3</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-flex-column-reverse">
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-primary">Flex item 1</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-dark">Flex item 2</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-bg-primary">Flex item 3</div>
</div>

Justify content

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-justify-content-start">...</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-justify-content-end">...</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-justify-content-center">...</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-justify-content-between">...</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-justify-content-around">...</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-justify-content-evenly">...</div>

Align items

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-align-items-start">...</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-align-items-end">...</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-align-items-center">...</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-align-items-baseline">...</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-align-items-stretch">...</div>

Sizing

Sizingユーティリティを使用して、要素の幅や高さを簡単に指定できます。レスポンシブなクラスやviewport単位のクラスも用意されています。

クラス CSSプロパティ 値の例
.%{STYLEGUIDE_PAGE}-w-25
.%{STYLEGUIDE_PAGE}-w-50
.%{STYLEGUIDE_PAGE}-w-75
.%{STYLEGUIDE_PAGE}-w-100
.%{STYLEGUIDE_PAGE}-w-auto
width 25%, 50%, 75%, 100%, auto
.%{STYLEGUIDE_PAGE}-mw-100 max-width 100%
.%{STYLEGUIDE_PAGE}-vw-100 width 100vw
.%{STYLEGUIDE_PAGE}-min-vw-100 min-width 100vw
.%{STYLEGUIDE_PAGE}-h-25
.%{STYLEGUIDE_PAGE}-h-50
.%{STYLEGUIDE_PAGE}-h-75
.%{STYLEGUIDE_PAGE}-h-100
.%{STYLEGUIDE_PAGE}-h-auto
height 25%, 50%, 75%, 100%, auto
.%{STYLEGUIDE_PAGE}-mh-100 max-height 100%
.%{STYLEGUIDE_PAGE}-vh-100 height 100vh
.%{STYLEGUIDE_PAGE}-min-vh-100 min-height 100vh

<div class="%{STYLEGUIDE_PAGE}-w-25">%{STYLEGUIDE_PAGE}-w-25</div>
<div class="%{STYLEGUIDE_PAGE}-w-50">%{STYLEGUIDE_PAGE}-w-50</div>
<div class="%{STYLEGUIDE_PAGE}-w-75">%{STYLEGUIDE_PAGE}-w-75</div>
<div class="%{STYLEGUIDE_PAGE}-w-100">%{STYLEGUIDE_PAGE}-w-100</div>
<div class="%{STYLEGUIDE_PAGE}-h-25 %{STYLEGUIDE_PAGE}-w-100">%{STYLEGUIDE_PAGE}-h-25</div>
<div class="%{STYLEGUIDE_PAGE}-h-50 %{STYLEGUIDE_PAGE}-w-100">%{STYLEGUIDE_PAGE}-h-50</div>
<div class="%{STYLEGUIDE_PAGE}-h-75 %{STYLEGUIDE_PAGE}-w-100">%{STYLEGUIDE_PAGE}-h-75</div>
<div class="%{STYLEGUIDE_PAGE}-h-100 %{STYLEGUIDE_PAGE}-w-100">%{STYLEGUIDE_PAGE}-h-100</div>

Spacing

Spacingユーティリティを使用して、要素のマージンとパディングを制御できます。

Margin

%{STYLEGUIDE_PAGE}-m-0
%{STYLEGUIDE_PAGE}-m-1
%{STYLEGUIDE_PAGE}-m-2
%{STYLEGUIDE_PAGE}-m-3
%{STYLEGUIDE_PAGE}-m-4
%{STYLEGUIDE_PAGE}-m-5
<div class="%{STYLEGUIDE_PAGE}-m-0">%{STYLEGUIDE_PAGE}-m-0</div>
<div class="%{STYLEGUIDE_PAGE}-m-1">%{STYLEGUIDE_PAGE}-m-1</div>
<div class="%{STYLEGUIDE_PAGE}-m-2">%{STYLEGUIDE_PAGE}-m-2</div>
<div class="%{STYLEGUIDE_PAGE}-m-3">%{STYLEGUIDE_PAGE}-m-3</div>
<div class="%{STYLEGUIDE_PAGE}-m-4">%{STYLEGUIDE_PAGE}-m-4</div>
<div class="%{STYLEGUIDE_PAGE}-m-5">%{STYLEGUIDE_PAGE}-m-5</div>

方向別のMargin

特定の方向にのみmarginを適用できます:

%{STYLEGUIDE_PAGE}-mt-3 (margin-top)
%{STYLEGUIDE_PAGE}-mb-3 (margin-bottom)
%{STYLEGUIDE_PAGE}-ms-3 (margin-left)
%{STYLEGUIDE_PAGE}-me-3 (margin-right)
%{STYLEGUIDE_PAGE}-mx-3 (margin-x)
%{STYLEGUIDE_PAGE}-my-3 (margin-y)
<div class="%{STYLEGUIDE_PAGE}-mt-3">%{STYLEGUIDE_PAGE}-mt-3 (margin-top)</div>
<div class="%{STYLEGUIDE_PAGE}-mb-3">%{STYLEGUIDE_PAGE}-mb-3 (margin-bottom)</div>
<div class="%{STYLEGUIDE_PAGE}-ms-3">%{STYLEGUIDE_PAGE}-ms-3 (margin-left)</div>
<div class="%{STYLEGUIDE_PAGE}-me-3">%{STYLEGUIDE_PAGE}-me-3 (margin-right)</div>
<div class="%{STYLEGUIDE_PAGE}-mx-3">%{STYLEGUIDE_PAGE}-mx-3 (margin-left & margin-right)</div>
<div class="%{STYLEGUIDE_PAGE}-my-3">%{STYLEGUIDE_PAGE}-my-3 (margin-top & margin-bottom)</div>
クラス 説明
.%{STYLEGUIDE_PAGE}-mt-* margin-top
.%{STYLEGUIDE_PAGE}-mb-* margin-bottom
.%{STYLEGUIDE_PAGE}-ms-* margin-left
.%{STYLEGUIDE_PAGE}-me-* margin-right
.%{STYLEGUIDE_PAGE}-mx-* margin-x (margin-left & margin-right)
.%{STYLEGUIDE_PAGE}-my-* margin-y (margin-top & margin-bottom)

Padding

%{STYLEGUIDE_PAGE}-p-0
%{STYLEGUIDE_PAGE}-p-1
%{STYLEGUIDE_PAGE}-p-2
%{STYLEGUIDE_PAGE}-p-3
%{STYLEGUIDE_PAGE}-p-4
%{STYLEGUIDE_PAGE}-p-5
<div class="%{STYLEGUIDE_PAGE}-p-0">%{STYLEGUIDE_PAGE}-p-0</div>
<div class="%{STYLEGUIDE_PAGE}-p-1">%{STYLEGUIDE_PAGE}-p-1</div>
<div class="%{STYLEGUIDE_PAGE}-p-2">%{STYLEGUIDE_PAGE}-p-2</div>
<div class="%{STYLEGUIDE_PAGE}-p-3">%{STYLEGUIDE_PAGE}-p-3</div>
<div class="%{STYLEGUIDE_PAGE}-p-4">%{STYLEGUIDE_PAGE}-p-4</div>
<div class="%{STYLEGUIDE_PAGE}-p-5">%{STYLEGUIDE_PAGE}-p-5</div>

方向別のPadding

特定の方向にのみpaddingを適用できます:

%{STYLEGUIDE_PAGE}-pt-3 (padding-top)
%{STYLEGUIDE_PAGE}-pb-3 (padding-bottom)
%{STYLEGUIDE_PAGE}-ps-3 (padding-left)
%{STYLEGUIDE_PAGE}-pe-3 (padding-right)
%{STYLEGUIDE_PAGE}-px-3 (padding-x)
%{STYLEGUIDE_PAGE}-py-3 (padding-y)
<div class="%{STYLEGUIDE_PAGE}-pt-3">%{STYLEGUIDE_PAGE}-pt-3 (padding-top)</div>
<div class="%{STYLEGUIDE_PAGE}-pb-3">%{STYLEGUIDE_PAGE}-pb-3 (padding-bottom)</div>
<div class="%{STYLEGUIDE_PAGE}-ps-3">%{STYLEGUIDE_PAGE}-ps-3 (padding-left)</div>
<div class="%{STYLEGUIDE_PAGE}-pe-3">%{STYLEGUIDE_PAGE}-pe-3 (padding-right)</div>
<div class="%{STYLEGUIDE_PAGE}-px-3">%{STYLEGUIDE_PAGE}-px-3 (padding-left & padding-right)</div>
<div class="%{STYLEGUIDE_PAGE}-py-3">%{STYLEGUIDE_PAGE}-py-3 (padding-top & padding-bottom)</div>
クラス 説明
.%{STYLEGUIDE_PAGE}-pt-* padding-top
.%{STYLEGUIDE_PAGE}-pb-* padding-bottom
.%{STYLEGUIDE_PAGE}-ps-* padding-left
.%{STYLEGUIDE_PAGE}-pe-* padding-right
.%{STYLEGUIDE_PAGE}-px-* padding-x (padding-left & padding-right)
.%{STYLEGUIDE_PAGE}-py-* padding-y (padding-top & padding-bottom)

Gap

Gapユーティリティを使用して、FlexboxやGridレイアウトの要素間の間隔を制御できます。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-gap-1">
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-info">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-gap-2">
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-info">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-gap-3">
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-info">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
</div>

Row Gap & Column Gap

行間と列間の間隔を個別に制御できます。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-flex-column %{STYLEGUIDE_PAGE}-row-gap-2">
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-info">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-d-flex %{STYLEGUIDE_PAGE}-column-gap-3">
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-info">Flex item</div>
	<div class="%{STYLEGUIDE_PAGE}-p-2 %{STYLEGUIDE_PAGE}-text-primary">Flex item</div>
</div>

Text

Textユーティリティを使用して、テキストの配置、色、サイズなどを制御できます。

Text alignment

Left aligned text.

Center aligned text.

Right aligned text.

<p class="%{STYLEGUIDE_PAGE}-text-left">Left aligned text.</p>
<p class="%{STYLEGUIDE_PAGE}-text-center">Center aligned text.</p>
<p class="%{STYLEGUIDE_PAGE}-text-right">Right aligned text.</p>

Vertical alignment

baseline top middle bottom text-bottom text-top
<span class="%{STYLEGUIDE_PAGE}-align-baseline">baseline</span>
<span class="%{STYLEGUIDE_PAGE}-align-top">top</span>
<span class="%{STYLEGUIDE_PAGE}-align-middle">middle</span>
<span class="%{STYLEGUIDE_PAGE}-align-bottom">bottom</span>
<span class="%{STYLEGUIDE_PAGE}-align-text-bottom">text-bottom</span>
<span class="%{STYLEGUIDE_PAGE}-align-text-top">text-top</span>

Text colors

Primary text color.

Info text color.

Success text color.

Warning text color.

Danger text color.

<p class="%{STYLEGUIDE_PAGE}-text-primary">Primary text color.</p>
<p class="%{STYLEGUIDE_PAGE}-text-info">Info text color.</p>
<p class="%{STYLEGUIDE_PAGE}-text-success">Success text color.</p>
<p class="%{STYLEGUIDE_PAGE}-text-warning">Warning text color.</p>
<p class="%{STYLEGUIDE_PAGE}-text-danger">Danger text color.</p>

Position

Positionユーティリティを使用して、要素の位置を制御できます。

%{STYLEGUIDE_PAGE}-position-relative
%{STYLEGUIDE_PAGE}-position-absolute
%{STYLEGUIDE_PAGE}-position-fixed
%{STYLEGUIDE_PAGE}-position-sticky
<div class="%{STYLEGUIDE_PAGE}-position-relative">%{STYLEGUIDE_PAGE}-position-relative</div>
<div class="%{STYLEGUIDE_PAGE}-position-absolute">%{STYLEGUIDE_PAGE}-position-absolute</div>
<div class="%{STYLEGUIDE_PAGE}-position-fixed">%{STYLEGUIDE_PAGE}-position-fixed</div>
<div class="%{STYLEGUIDE_PAGE}-position-sticky">%{STYLEGUIDE_PAGE}-position-sticky</div>

Utility API

Utility APIは、Sassベースのユーティリティクラスを生成します

ユーティリティの定義

ユーティリティクラスは、値を変更・拡張できるユーティリティAPIで生成されます。Sassマップに慣れていない場合は、公式ドキュメントを参照してください。

各ユーティリティは以下のオプションを受け入れます:

オプション デフォルト値 説明
property Required CSSプロパティ名(文字列または配列)
values Required 値のリストまたはマップ
class Optional null 生成されるクラス名のプレフィックス
responsive Optional false レスポンシブクラスを生成するかどうか
print Optional false 印刷用クラスを生成するかどうか
css-var Optional false CSS変数を生成するかどうか
local-vars Optional null ローカルCSS変数のマップ
state Optional null 疑似クラス(hover, focus等)のリスト

その他のユーティリティ

このドキュメントでは主要なユーティリティのみを紹介しています。すべての利用可能なユーティリティについては、themes/system/src/scss/global/_utilities.scssファイルを参照してください。

このファイルには以下のようなユーティリティが定義されています:

詳細な使用方法やカスタマイズ方法については、各ユーティリティの定義を確認してください。