Property Class の書き方

Property Class（プロパティクラス）は、-p:20 や -ta:center のように、ハイフン1つで始まる短いクラスです。1つのクラスが、1つの CSS プロパティ（色・大きさ・余白など、見た目の種類）を受け持ちます。

どんなときに使う？#

• 余白・文字の大きさ・色などを、CSS を書かずに HTML のクラスだけで決めたいとき
• 決まった段階の値（トークン）から選んで、サイト全体の見た目をそろえたいとき
• 画面の幅によって値を変えたいとき（レスポンシブ）

3つの書き方#

Property Class には、次の3つの形があります。{prop} はプロパティの略した名前、{value} は値、{bp} はブレイクポイント（レイアウトを切り替える画面の幅）の名前です。

用意された値を選ぶ（-{prop}:{value}）#

いちばんよく使う形です。コロン（:）のあとに値を書きます。

<p class="-fz:xl -fw:bold -ta:center">大きく、太く、真ん中に</p>

-fz は font-size（文字の大きさ）、-fw は font-weight（文字の太さ）、-ta は text-align（文字のそろえ方）の略です。

値には2種類あります。

• CSS の値そのまま：-d:none は display: none、-ta:center は text-align: center になります
• トークンの名前：-fz:l は var(--fz--l)、-p:20 は var(--s20) を使います。トークンは「この大きさはこの値」と前もって決めた値の組です（デザイントークン）

好きな値を渡す（-{prop} と --{prop}）#

用意された値に無いものを使いたいときは、値の無いクラス -{prop} を付け、style 属性で --{prop} 変数に値を入れます。

<div class="-w:fit -h -p:10 -bgc:base-2 -bd" style="--h: 5em">高さ 5em の箱</div>

-h が「高さは --h 変数の値にする」という意味のクラスで、--h: 5em がその値です。

画面の幅で切り替える（-{prop}_{bp}）#

_sm などを付けたクラスと、--{prop}_{bp} 変数を組み合わせると、画面（正しくは親の箱）が広いときだけ値が変わります。

<div class="-p:10 -p_sm -bd" style="--p_sm: var(--s40)">
  狭いときは余白が小さく、広い表示例では余白が大きくなります。
</div>

ブレイクポイントは sm（480px 以上）・md（800px 以上）・lg（1120px 以上）の3つです。くわしくは 画面の幅で切り替える（レスポンシブ） で説明しています。

Lism が付ける CSS#

たとえば次のような CSS が用意されています。値を直接書くクラスと、変数を読むクラスがあることが分かります。

.-ta\:center { text-align: center }
.-fz\:l { font-size: var(--fz--l) }
.-p\:20 { --p: var(--s20) }

.-d { display: var(--d) }
.-p, [class*="-p:"] { padding: var(--p) }

@container (min-width: 480px) {
  .-d_sm { display: var(--d_sm) }
  .-p_sm { padding: var(--p); --p: var(--p_sm) !important }
}

CSS ではコロンに \ を付けて .-ta\:center と書きますが、HTML では class="-ta:center" とそのまま書きます。

いつも変数を通すプロパティ（alwaysVar）#

上の CSS をよく見ると、-d_sm は display を直接上書きしますが、-p_sm は --p 変数を書きかえています。プロパティによって、この2つの作りがあります。

alwaysVar の6つは、いまの値がいつも --p や --c で読めます。そのため、ほかの CSS からその値を使えます。たとえば Set Class の set--bdrsInner は、--bdrs と --p を読んで内側の角丸を計算します。

名前の略し方#

{prop} の部分は、Emmet（HTML や CSS を短く書くための道具）の略し方をもとにしています。くわしくは 名前のルール（省略のしかた） にあります。ここでは、表を読むときに迷いやすい点だけを挙げます。

• よく使う1文字の略：p（padding）・m（margin）・g（gap）・c（color）・w（width）・h（height）・d（display）・o（opacity）など
• グループの略＋残りの略：fz（font-size）・bgc（background-color）・gtc（grid-template-columns）
• 向きはハイフンで付ける：bd-t（border-top）・ov-x（overflow-x）
• 例外：padding と margin だけは、向きの前のハイフンを省きます（pt・px・mbs など）
• max-・min- はハイフンを残します（max-w・min-h）

値の部分は、ふつうは CSS の値をそのまま書きます。ただし、長くて意味が分かりやすい値は短くしてあります。

このサイトの表の見方#

分野ごとのページでは、Property Class を次の4つの列の表にしています。

分野ごとの一覧#

Property Class の全部は、分野ごとのページにまとめています。

React・Astro で書く場合#

コンポーネントでは、略した名前をそのまま Props（コンポーネントに渡す指定）の名前に使います。

<Text fz="xl" fw="bold" ta="center">
  大きく、太く、真ん中に
</Text>

画面の幅ごとの値は、p={['10', '40']} のように配列で渡せます（画面の幅で切り替える（レスポンシブ））。Props の全体は Lism Props（コンポーネントの指定） で説明しています。

関連するページ#

• 名前のルール（省略のしかた）
• 画面の幅で切り替える（レスポンシブ）
• デザイントークン（余白・角丸・影など）
• クラスの種類と見分け方