ディスプレイクラスを使用して、コンポーネントのdisplayプロパティをレスポンシブに切り替えられます。`display`のすべての可能な値のサブセットのみを意図的にサポートします。
クラス名の形式は以下の通りです。
.%{STYLEGUIDE_PAGE}-d-{value}というクラス名が付けられます。.%{STYLEGUIDE_PAGE}-d-{breakpoint}-{value}があります。valueの種類は以下の通りです。
noneinlineinline-blockblockgridinline-gridtabletable-celltable-rowflexinline-flex
<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>
モバイルフレンドリーな開発を迅速に行うには、レスポンシブ表示クラスを使用して、デバイスごとに要素を表示・非表示にします。
<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`の値を変更します。
<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ユーティリティを使用して、flexboxの動作を制御できます。
<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>
<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>
<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>
<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ユーティリティを使用して、要素の幅や高さを簡単に指定できます。レスポンシブなクラスや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ユーティリティを使用して、要素のマージンとパディングを制御できます。
<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を適用できます:
<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) |
<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を適用できます:
<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ユーティリティを使用して、FlexboxやGridレイアウトの要素間の間隔を制御できます。
<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>
行間と列間の間隔を個別に制御できます。
<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ユーティリティを使用して、テキストの配置、色、サイズなどを制御できます。
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>
<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>
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ユーティリティを使用して、要素の位置を制御できます。
<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は、Sassベースのユーティリティクラスを生成します
ユーティリティクラスは、値を変更・拡張できるユーティリティAPIで生成されます。Sassマップに慣れていない場合は、公式ドキュメントを参照してください。
各ユーティリティは以下のオプションを受け入れます:
| オプション | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| property | Required | – | CSSプロパティ名(文字列または配列) |
| values | Required | – | 値のリストまたはマップ |
| class | Optional | null | 生成されるクラス名のプレフィックス |
| responsive | Optional | false | レスポンシブクラスを生成するかどうか |
| Optional | false | 印刷用クラスを生成するかどうか | |
| css-var | Optional | false | CSS変数を生成するかどうか |
| local-vars | Optional | null | ローカルCSS変数のマップ |
| state | Optional | null | 疑似クラス(hover, focus等)のリスト |
このドキュメントでは主要なユーティリティのみを紹介しています。すべての利用可能なユーティリティについては、themes/system/src/scss/global/_utilities.scssファイルを参照してください。
このファイルには以下のようなユーティリティが定義されています:
詳細な使用方法やカスタマイズ方法については、各ユーティリティの定義を確認してください。