Utilities
値の直接指定
長さまたは数値のプロパティに、静的な数値を 1 つ渡します。
このページの内容
クラス
| クラス | 宣言 |
|---|---|
m(<number>) | margin: calc(<number> * 1px); |
p(<number>) | padding: calc(<number> * 1px); |
gap(<number>) | gap: calc(<number> * 1px); |
w(<number>) | width: calc(<number> * 1px); |
h(<number>) | height: calc(<number> * 1px); |
r(<number>) | border-radius: calc(<number> * 1px); |
b(<number>) | border-width: calc(<number> * 1px); |
grow(<number>) | flex-grow: <number>; |
shrink(<number>) | flex-shrink: <number>; |
order(<integer>) | order: <integer>; |
その他の関数（90 件）
| クラス | 宣言 |
|---|---|
mt(<number>) | margin-top: calc(<number> * 1px); |
mr(<number>) | margin-right: calc(<number> * 1px); |
mb(<number>) | margin-bottom: calc(<number> * 1px); |
ml(<number>) | margin-left: calc(<number> * 1px); |
mx(<number>) | margin-inline: calc(<number> * 1px); |
mxs(<number>) | margin-inline-start: calc(<number> * 1px); |
mxe(<number>) | margin-inline-end: calc(<number> * 1px); |
my(<number>) | margin-block: calc(<number> * 1px); |
mys(<number>) | margin-block-start: calc(<number> * 1px); |
mye(<number>) | margin-block-end: calc(<number> * 1px); |
pt(<number>) | padding-top: calc(<number> * 1px); |
pr(<number>) | padding-right: calc(<number> * 1px); |
pb(<number>) | padding-bottom: calc(<number> * 1px); |
pl(<number>) | padding-left: calc(<number> * 1px); |
px(<number>) | padding-inline: calc(<number> * 1px); |
pxs(<number>) | padding-inline-start: calc(<number> * 1px); |
pxe(<number>) | padding-inline-end: calc(<number> * 1px); |
py(<number>) | padding-block: calc(<number> * 1px); |
pys(<number>) | padding-block-start: calc(<number> * 1px); |
pye(<number>) | padding-block-end: calc(<number> * 1px); |
scroll-m(<number>) | scroll-margin: calc(<number> * 1px); |
scroll-mt(<number>) | scroll-margin-top: calc(<number> * 1px); |
scroll-mr(<number>) | scroll-margin-right: calc(<number> * 1px); |
scroll-mb(<number>) | scroll-margin-bottom: calc(<number> * 1px); |
scroll-ml(<number>) | scroll-margin-left: calc(<number> * 1px); |
scroll-mx(<number>) | scroll-margin-inline: calc(<number> * 1px); |
scroll-mxs(<number>) | scroll-margin-inline-start: calc(<number> * 1px); |
scroll-mxe(<number>) | scroll-margin-inline-end: calc(<number> * 1px); |
scroll-my(<number>) | scroll-margin-block: calc(<number> * 1px); |
scroll-mys(<number>) | scroll-margin-block-start: calc(<number> * 1px); |
scroll-mye(<number>) | scroll-margin-block-end: calc(<number> * 1px); |
scroll-p(<number>) | scroll-padding: calc(<number> * 1px); |
scroll-pt(<number>) | scroll-padding-top: calc(<number> * 1px); |
scroll-pr(<number>) | scroll-padding-right: calc(<number> * 1px); |
scroll-pb(<number>) | scroll-padding-bottom: calc(<number> * 1px); |
scroll-pl(<number>) | scroll-padding-left: calc(<number> * 1px); |
scroll-px(<number>) | scroll-padding-inline: calc(<number> * 1px); |
scroll-pxs(<number>) | scroll-padding-inline-start: calc(<number> * 1px); |
scroll-pxe(<number>) | scroll-padding-inline-end: calc(<number> * 1px); |
scroll-py(<number>) | scroll-padding-block: calc(<number> * 1px); |
scroll-pys(<number>) | scroll-padding-block-start: calc(<number> * 1px); |
scroll-pye(<number>) | scroll-padding-block-end: calc(<number> * 1px); |
top(<number>) | top: calc(<number> * 1px); |
right(<number>) | right: calc(<number> * 1px); |
bottom(<number>) | bottom: calc(<number> * 1px); |
left(<number>) | left: calc(<number> * 1px); |
inset(<number>) | inset: calc(<number> * 1px); |
ix(<number>) | inset-inline: calc(<number> * 1px); |
ixs(<number>) | inset-inline-start: calc(<number> * 1px); |
ixe(<number>) | inset-inline-end: calc(<number> * 1px); |
iy(<number>) | inset-block: calc(<number> * 1px); |
iys(<number>) | inset-block-start: calc(<number> * 1px); |
iye(<number>) | inset-block-end: calc(<number> * 1px); |
col-gap(<number>) | column-gap: calc(<number> * 1px); |
row-gap(<number>) | row-gap: calc(<number> * 1px); |
border-spacing(<number>) | border-spacing: calc(<number> * 1px); |
outline-offset(<number>) | outline-offset: calc(<number> * 1px); |
shape-margin(<number>) | shape-margin: calc(<number> * 1px); |
translate(<number>) | translate: calc(<number> * 1px); |
word-spacing(<number>) | word-spacing: calc(<number> * 1px); |
size-x(<number>) | inline-size: calc(<number> * 1px); |
size-y(<number>) | block-size: calc(<number> * 1px); |
min-w(<number>) | min-width: calc(<number> * 1px); |
min-h(<number>) | min-height: calc(<number> * 1px); |
min-size-x(<number>) | min-inline-size: calc(<number> * 1px); |
min-size-y(<number>) | min-block-size: calc(<number> * 1px); |
max-w(<number>) | max-width: calc(<number> * 1px); |
max-h(<number>) | max-height: calc(<number> * 1px); |
max-size-x(<number>) | max-inline-size: calc(<number> * 1px); |
max-size-y(<number>) | max-block-size: calc(<number> * 1px); |
basis(<number>) | flex-basis: calc(<number> * 1px); |
rtl(<number>) | border-top-left-radius: calc(<number> * 1px); |
rtr(<number>) | border-top-right-radius: calc(<number> * 1px); |
rbl(<number>) | border-bottom-left-radius: calc(<number> * 1px); |
rbr(<number>) | border-bottom-right-radius: calc(<number> * 1px); |
rss(<number>) | border-start-start-radius: calc(<number> * 1px); |
rse(<number>) | border-start-end-radius: calc(<number> * 1px); |
res(<number>) | border-end-start-radius: calc(<number> * 1px); |
ree(<number>) | border-end-end-radius: calc(<number> * 1px); |
bt(<number>) | border-top-width: calc(<number> * 1px); |
br(<number>) | border-right-width: calc(<number> * 1px); |
bb(<number>) | border-bottom-width: calc(<number> * 1px); |
bl(<number>) | border-left-width: calc(<number> * 1px); |
bx(<number>) | border-inline-width: calc(<number> * 1px); |
bxs(<number>) | border-inline-start-width: calc(<number> * 1px); |
bxe(<number>) | border-inline-end-width: calc(<number> * 1px); |
by(<number>) | border-block-width: calc(<number> * 1px); |
bys(<number>) | border-block-start-width: calc(<number> * 1px); |
bye(<number>) | border-block-end-width: calc(<number> * 1px); |
outline(<number>) | outline-width: calc(<number> * 1px); |
長さの関数は数値に 1px を掛けます。grow()、shrink()、order() は数値をそのまま渡します。ほかの単位や動的な値には、(margin:1rem) のようなネイティブ宣言を使います。
数値の意味はプロパティが決める
p(12) は padding: calc(12 * 1px) を出力するため、数値はピクセル数を表します。間隔スケールのキーでも、テーマの間隔トークンの倍率でもありません。p(1.5) のような小数も使えます。
直接渡した数値はピクセル長か単位なしの係数になる
左の数値はピクセル長になります。右の数値は flex 係数です。基準サイズをゼロにし、内容の最小サイズの制約をなくして、1:2 の分配だけを示しています。基準サイズや最小サイズが異なると、最終的な幅は変わり得ます。
テキストによる説明
- padding の例は実際の p(12) を適用し、内容と各外縁の間にちょうど 12px を設けます。青い注記で、その内側余白を示しています。
- flex の例は、幅 252px、gap 12px の行に、flex 基準サイズと最小幅がともにゼロの 2 項目を置き、それぞれ grow(1) と grow(2) を適用します。
- 残りの 240px は 80px と 160px に分配されます。係数は引き続き単位なしであり、ピクセル幅ではありません。
- これらは条件を揃えた比較です。基準サイズがゼロでなかったり、内容の最小サイズがあったりすると、最終的な幅が拡張比率どおりになるとは限りません。各関数の宣言は記事に掲載しています。
grow(1) と shrink(1) は単位のない flex 係数です。拡張では残りの空間を分配します。図では基準サイズをゼロにし、内容による最小サイズの制約をなくして、1:2 の比率だけを示しています。基準サイズや最小サイズが異なる場合、係数だけでは最終的な幅は決まりません。縮小時の分配には、各項目の flex 基準サイズも関わります。
order() は数値をそのまま出力しますが、CSS プロパティには整数が必要です。負の値には各プロパティの規則が適用されます。m(-4) は有効な負のマージンですが、負の padding や負の flex 係数で負の使用値を指定することはできません。
渡せるのは静的な数値 1 つだけです。単位、var()、算術式は、(padding:var(--panel-space)) のようなネイティブ宣言に記述します。名前を付けて共有する長さには、p-card のようなテーマトークンを使います。
これらの関数が設定するのは、一覧にある宣言だけです。b(1) にはボーダースタイルが、top(4) には inset が作用する配置方式が、gap(12) には gap が作用するレイアウトが必要です。表では論理プロパティと物理プロパティを区別しています。
関連項目： 間隔のトークン、ネイティブ宣言、flex 係数.
使用例
正確なピクセル長を指定し、1 つのボックスに残りの空間を割り当てます。
Fixed
Grows to fill
<div class="… flex flex-wrap gap(12)"> <div class="… p(12) r(10) b(1) b-solid">Fixed</div> <div class="… grow(1) p(12) r(10) b(1) b-dashed">Grows to fill</div></div>生成された CSS
@layer utilities { .r\(10\) { border-radius: calc(10 * 1px) } .b-dashed { border-style: dashed } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .flex { display: flex } .grow\(1\) { flex-grow: 1 } .flex-wrap { flex-wrap: wrap } .gap\(12\) { gap: calc(12 * 1px) } .p\(12\) { padding: calc(12 * 1px) }}カスタマイズ
プリセットはこれらのクラスを @utility で定義しています。スタイルシートで同じ名前を定義すると、元の定義を置き換えられます。
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}すべての定義（100 件）
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}@utility mt(--value <number>) { margin-top: calc(var(--value) * 1px);}@utility mr(--value <number>) { margin-right: calc(var(--value) * 1px);}@utility mb(--value <number>) { margin-bottom: calc(var(--value) * 1px);}@utility ml(--value <number>) { margin-left: calc(var(--value) * 1px);}@utility mx(--value <number>) { margin-inline: calc(var(--value) * 1px);}@utility mxs(--value <number>) { margin-inline-start: calc(var(--value) * 1px);}@utility mxe(--value <number>) { margin-inline-end: calc(var(--value) * 1px);}@utility my(--value <number>) { margin-block: calc(var(--value) * 1px);}@utility mys(--value <number>) { margin-block-start: calc(var(--value) * 1px);}@utility mye(--value <number>) { margin-block-end: calc(var(--value) * 1px);}@utility p(--value <number>) { padding: calc(var(--value) * 1px);}@utility pt(--value <number>) { padding-top: calc(var(--value) * 1px);}@utility pr(--value <number>) { padding-right: calc(var(--value) * 1px);}@utility pb(--value <number>) { padding-bottom: calc(var(--value) * 1px);}@utility pl(--value <number>) { padding-left: calc(var(--value) * 1px);}@utility px(--value <number>) { padding-inline: calc(var(--value) * 1px);}@utility pxs(--value <number>) { padding-inline-start: calc(var(--value) * 1px);}@utility pxe(--value <number>) { padding-inline-end: calc(var(--value) * 1px);}@utility py(--value <number>) { padding-block: calc(var(--value) * 1px);}@utility pys(--value <number>) { padding-block-start: calc(var(--value) * 1px);}@utility pye(--value <number>) { padding-block-end: calc(var(--value) * 1px);}@utility scroll-m(--value <number>) { scroll-margin: calc(var(--value) * 1px);}@utility scroll-mt(--value <number>) { scroll-margin-top: calc(var(--value) * 1px);}@utility scroll-mr(--value <number>) { scroll-margin-right: calc(var(--value) * 1px);}@utility scroll-mb(--value <number>) { scroll-margin-bottom: calc(var(--value) * 1px);}@utility scroll-ml(--value <number>) { scroll-margin-left: calc(var(--value) * 1px);}@utility scroll-mx(--value <number>) { scroll-margin-inline: calc(var(--value) * 1px);}@utility scroll-mxs(--value <number>) { scroll-margin-inline-start: calc(var(--value) * 1px);}@utility scroll-mxe(--value <number>) { scroll-margin-inline-end: calc(var(--value) * 1px);}@utility scroll-my(--value <number>) { scroll-margin-block: calc(var(--value) * 1px);}@utility scroll-mys(--value <number>) { scroll-margin-block-start: calc(var(--value) * 1px);}@utility scroll-mye(--value <number>) { scroll-margin-block-end: calc(var(--value) * 1px);}@utility scroll-p(--value <number>) { scroll-padding: calc(var(--value) * 1px);}@utility scroll-pt(--value <number>) { scroll-padding-top: calc(var(--value) * 1px);}@utility scroll-pr(--value <number>) { scroll-padding-right: calc(var(--value) * 1px);}@utility scroll-pb(--value <number>) { scroll-padding-bottom: calc(var(--value) * 1px);}@utility scroll-pl(--value <number>) { scroll-padding-left: calc(var(--value) * 1px);}@utility scroll-px(--value <number>) { scroll-padding-inline: calc(var(--value) * 1px);}@utility scroll-pxs(--value <number>) { scroll-padding-inline-start: calc(var(--value) * 1px);}@utility scroll-pxe(--value <number>) { scroll-padding-inline-end: calc(var(--value) * 1px);}@utility scroll-py(--value <number>) { scroll-padding-block: calc(var(--value) * 1px);}@utility scroll-pys(--value <number>) { scroll-padding-block-start: calc(var(--value) * 1px);}@utility scroll-pye(--value <number>) { scroll-padding-block-end: calc(var(--value) * 1px);}@utility top(--value <number>) { top: calc(var(--value) * 1px);}@utility right(--value <number>) { right: calc(var(--value) * 1px);}@utility bottom(--value <number>) { bottom: calc(var(--value) * 1px);}@utility left(--value <number>) { left: calc(var(--value) * 1px);}@utility inset(--value <number>) { inset: calc(var(--value) * 1px);}@utility ix(--value <number>) { inset-inline: calc(var(--value) * 1px);}@utility ixs(--value <number>) { inset-inline-start: calc(var(--value) * 1px);}@utility ixe(--value <number>) { inset-inline-end: calc(var(--value) * 1px);}@utility iy(--value <number>) { inset-block: calc(var(--value) * 1px);}@utility iys(--value <number>) { inset-block-start: calc(var(--value) * 1px);}@utility iye(--value <number>) { inset-block-end: calc(var(--value) * 1px);}@utility gap(--value <number>) { gap: calc(var(--value) * 1px);}@utility col-gap(--value <number>) { column-gap: calc(var(--value) * 1px);}@utility row-gap(--value <number>) { row-gap: calc(var(--value) * 1px);}@utility border-spacing(--value <number>) { border-spacing: calc(var(--value) * 1px);}@utility outline-offset(--value <number>) { outline-offset: calc(var(--value) * 1px);}@utility shape-margin(--value <number>) { shape-margin: calc(var(--value) * 1px);}@utility translate(--value <number>) { translate: calc(var(--value) * 1px);}@utility word-spacing(--value <number>) { word-spacing: calc(var(--value) * 1px);}@utility w(--value <number>) { width: calc(var(--value) * 1px);}@utility h(--value <number>) { height: calc(var(--value) * 1px);}@utility size-x(--value <number>) { inline-size: calc(var(--value) * 1px);}@utility size-y(--value <number>) { block-size: calc(var(--value) * 1px);}@utility min-w(--value <number>) { min-width: calc(var(--value) * 1px);}@utility min-h(--value <number>) { min-height: calc(var(--value) * 1px);}@utility min-size-x(--value <number>) { min-inline-size: calc(var(--value) * 1px);}@utility min-size-y(--value <number>) { min-block-size: calc(var(--value) * 1px);}@utility max-w(--value <number>) { max-width: calc(var(--value) * 1px);}@utility max-h(--value <number>) { max-height: calc(var(--value) * 1px);}@utility max-size-x(--value <number>) { max-inline-size: calc(var(--value) * 1px);}@utility max-size-y(--value <number>) { max-block-size: calc(var(--value) * 1px);}@utility basis(--value <number>) { flex-basis: calc(var(--value) * 1px);}@utility r(--value <number>) { border-radius: calc(var(--value) * 1px);}@utility rtl(--value <number>) { border-top-left-radius: calc(var(--value) * 1px);}@utility rtr(--value <number>) { border-top-right-radius: calc(var(--value) * 1px);}@utility rbl(--value <number>) { border-bottom-left-radius: calc(var(--value) * 1px);}@utility rbr(--value <number>) { border-bottom-right-radius: calc(var(--value) * 1px);}@utility rss(--value <number>) { border-start-start-radius: calc(var(--value) * 1px);}@utility rse(--value <number>) { border-start-end-radius: calc(var(--value) * 1px);}@utility res(--value <number>) { border-end-start-radius: calc(var(--value) * 1px);}@utility ree(--value <number>) { border-end-end-radius: calc(var(--value) * 1px);}@utility b(--value <number>) { border-width: calc(var(--value) * 1px);}@utility bt(--value <number>) { border-top-width: calc(var(--value) * 1px);}@utility br(--value <number>) { border-right-width: calc(var(--value) * 1px);}@utility bb(--value <number>) { border-bottom-width: calc(var(--value) * 1px);}@utility bl(--value <number>) { border-left-width: calc(var(--value) * 1px);}@utility bx(--value <number>) { border-inline-width: calc(var(--value) * 1px);}@utility bxs(--value <number>) { border-inline-start-width: calc(var(--value) * 1px);}@utility bxe(--value <number>) { border-inline-end-width: calc(var(--value) * 1px);}@utility by(--value <number>) { border-block-width: calc(var(--value) * 1px);}@utility bys(--value <number>) { border-block-start-width: calc(var(--value) * 1px);}@utility bye(--value <number>) { border-block-end-width: calc(var(--value) * 1px);}@utility outline(--value <number>) { outline-width: calc(var(--value) * 1px);}@utility grow(--value <number>) { flex-grow: var(--value);}@utility shrink(--value <number>) { flex-shrink: var(--value);}@utility order(--value <integer>) { order: var(--value);}関連項目： ユーティリティの定義.