# ユーティリティ

## ディスプレイ

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

### 表記方法

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

- `xs`の場合は`.%{STYLEGUIDE_PAGE}-d-{value}`というクラス名が付けられます。
- `sm`、`md`、`lg`、`xl`に対して`.%{STYLEGUIDE_PAGE}-d-{breakpoint}-{value}`があります。

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

- `none`
- `inline`
- `inline-block`
- `block`
- `grid`
- `inline-grid`
- `table`
- `table-cell`
- `table-row`
- `flex`
- `inline-flex`

### 例

%{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`ファイルを参照してください。

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

- Float utilities
- Object fit utilities
- Opacity utilities
- Overflow utilities
- Shadow utilities
- Sizing utilities (width, height, viewport)
- Font utilities (family, size, weight, style)
- Line height utilities
- Text utilities (decoration, transform, white-space)
- User select utilities
- Pointer events utilities
- Visibility utilities
- Z-index utilities

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