Lism CSS
Docs
検索

Property Class( -* )

Lism では、主要なCSSプロパティ群に対して、それらで頻繁に使用される値やトークンを手軽にセットできるようなクラスを用意しています。
さらに、その中でも特に重要なCSSプロパティについてはブレイクポイント指定用クラスも用意しています。

それらを Property Class と呼んでおり、-{prop}(:{value}), -{prop}_{bp} という形式で定義しています。

↓
例えば以下のようなものがあります。
.-fz\:l { font-size: var(--fz--l) }
.-fz\:xl { font-size: var(--fz--xl) }
.-ta\:center { text-align: center }
.-d\:none { display: none }
.-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}
}
@container (min-width: 800px) {
  .-d_md{display:var(--d_md)}
  .-p_md{padding:var(--p);--p:var(--p_md)!important}
}

このページでは、その Property Classの一覧を紹介します。

SCSSでカスタマイズすることで、出力するクラスの種類は変更できます。

このページの表の見方

ここからはテーブル形式で、各プロパティの情報をまとめていきます。

カラム名 説明
Shorthand CSSプロパティの省略形。Property Classの-{prop}:{val}の{prop}にあたる文字列です。
また、Lismコンポーネントに指定するためのプロパティ名もこの文字列です。
Property 対応するCSSプロパティ
To Class Property Class として出力される値
BP ブレイクポイント対応クラス（-{prop}_{bp}）のサポート状況。✔ は sm・md・lg に対応、- は非対応。

省略形の文字列(Shorthand)は、クラスとして出力されます。

Typography

Shorthand Property To Class BP
f font inherit -
fz font-size FZ ✔
ff font-family FF -
fw font-weight FW,
100〜900		 -
fs font-style italic -
hl line-height（ハーフレディング） HL,
0		 ✔
lh line-height（倍率） LH,
1		 -
lts letter-spacing LTS -
ta text-align center
left
right		 -
td text-decoration none -
tt text-transform uppercase
lowercase		 -
↓
Examples

Example text

<p class="-fz:xl -fw:bold -lts:l -ta:center -tt:uppercase">Example text</p>

Colors

Shorthand Property To Class BP
c color brand,accent
text,text-2,
base,
keycolor,
inherit		 -
bgc background-color brand,accent
base,base-2,
text,
keycolor,
inherit,
transparent,
current		 -
bdc --bdc brand,accent
divider,
keycolor,
inherit,
transparent,
current		 -

current は currentColor（その要素の文字色）の省略形です。

keycolor は --keycolor 変数を参照するクラスです（例: .-c\:keycolor { --c: var(--keycolor) }）。

またfull.cssでは、上の表の値に加えて、セマンティックカラー・パレットカラーの全トークンが -bgc:red のようにクラス化されます。

↓
Examples

Example text

<p class="-c:brand -bgc:base-2 -bdc:current -bd -p:30">Example text</p>

関連トークン: COLOR

Spacing

Padding

Shorthand Property To Class BP
p padding 0, SPACE ✔
px padding-inline 0, SPACE ✔
py padding-block 0, SPACE ✔
ps padding-inline-start SPACE ✔
pe padding-inline-end SPACE ✔
pbs padding-block-start SPACE ✔
pbe padding-block-end SPACE ✔
pl padding-left SPACE ✔
pr padding-right SPACE ✔
pt padding-top SPACE ✔
pb padding-bottom SPACE ✔

Margin

Shorthand Property To Class BP
m margin auto, 0, SPACE ✔
mx margin-inline auto, 0, SPACE ✔
my margin-block auto, 0, SPACE ✔
ms margin-inline-start auto, SPACE ✔
me margin-inline-end auto, SPACE ✔
mbs margin-block-start auto, 0, SPACE ✔
mbe margin-block-end auto, SPACE ✔
ml margin-left SPACE ✔
mr margin-right SPACE ✔
mt margin-top SPACE ✔
mb margin-bottom SPACE ✔

物理方向（pl / mt など）よりも、書字方向に追従する論理方向（ps / mbs など）の利用を推奨しています。

↓
Space Examples

Example text

Example text

リサイズ 
<div class="-p:20 -p_sm -bd" style="--p_sm: var(--s30)">
  <p>Example text</p>
  <p class="-mbs:20 -mx:30">Example text</p>
</div>

Width & Height

Shorthand Property To Class BP
w width 100%,
fit(fit-content)		 ✔
h height 100%,
fit(fit-content)		 ✔
max-w max-width 100% ✔
max-h max-height 100% ✔
min-w min-width 100% ✔
min-h min-height 100% ✔
sz inline-size - ✔
max-sz max-inline-size xs,s,m,l,xl,bleed,full ✔
min-sz min-inline-size - ✔
bsz block-size - -
max-bsz max-block-size - -
min-bsz min-block-size - -
contentSize --contentSize 変数のみ s,m,l,xl -

関連トークン: SIZE

↓
Examples

Example text

<div class="-w:fit -h -bgc:base-2 -p:10 -bd" style="--h:5em">Example text</div>

max-szのfullとbleedは、親要素やis--containerの幅を基準に広がる、少し特殊なクラスです。詳しくはmax-szページをご覧ください。

-max-sz

コンテンツの最大幅を制御する -max-sz クラスの使い方について解説します。

Displays

Shorthand Property To Class BP
d display none,
block,
flex,
inline-flex,
grid,
inline-grid,
inline,
inline-block		 ✔
v visibility hidden -
o opacity OPACITY, 0 -
ov overflow auto, clip, hidden -
ov-x overflow-x auto, clip, scroll -
ov-y overflow-y auto, clip, scroll -
ovw overflow-wrap anywhere -
ar aspect-ratio 21/9,16/9,3/2,1/1,
og		 ✔
↓
Examples

Box

Text

<div>
  <p class="-d:inline-flex -ar:1/1 -p:20 -bgc:base-2 -bd">Box</p>
  <p class="-d:inline-flex -o:pp -px:20">Text</p>
</div>

Positions

Shorthand Property To Class BP
pos position relative,
absolute,
static,
fixed,
sticky		 ✔
t top 0,50%,100% -
l left 0,50%,100% -
r right 0,50%,100% -
b bottom 0,50%,100% -
z z-index -1, 0, 1, 99 -
i inset 0 -
i-x inset-inline - -
i-y inset-block - -
i-s inset-inline-start - -
i-e inset-inline-end - -
i-bs inset-block-start - -
i-be inset-block-end - -

position:absoluteで要素を配置する例をいくつか紹介します。

↓

配置の指定例

A
B
C
D
E
F
G
H
I
リサイズ 
<div class="l--box -pos:relative -ar:16/9 -hl:0 -ff:mono">
  <div class="-pos:absolute -l:0 -t:0 -bgc:base-2 -bd -p:10">A</div>
  <div class="-pos:absolute -l:0 -r:0 -w:fit -mx:auto -bgc:base-2 -bd -p:10">B</div>
  <div class="-pos:absolute -r:0 -t:0 -bgc:base-2 -bd -p:10">C</div>
  <div class="-pos:absolute -l:0 -t:0 -b:0 -h:fit -my:auto -bgc:base-2 -bd -p:10">D</div>
  <div class="-pos:absolute -i:0 -m:auto -w:fit -h:fit -bgc:base-2 -bd -p:10">E</div>
  <div class="-pos:absolute -r:0 -t:0 -b:0 -h:fit -my:auto -bgc:base-2 -bd -p:10">F</div>
  <div class="-pos:absolute -l:0 -b:0 -bgc:base-2 -bd -p:10">G</div>
  <div class="-pos:absolute -l:0 -r:0 -b:0 -w:fit -mx:auto -bgc:base-2 -bd -p:10">H</div>
  <div class="-pos:absolute -r:0 -b:0 -bgc:base-2 -bd -p:10">I</div>
</div>

Layouts

Gap

Shorthand Property To Class BP
g gap 0, SPACE,inherit ✔
cg column-gap SPACE ✔
rg row-gap SPACE ✔

Flex

Shorthand Property To Class BP
fxf flex-flow - -
fxw flex-wrap wrap ✔
fxd flex-direction column,
column-reverse,
row-reverse		 ✔
fx flex 1 ✔
fxsh flex-shrink 0 -
fxg flex-grow 1 -
fxb flex-basis - ✔
↓
Examples
Item
Item
Item
<div class="l--flex -g:20">
  <div class="-fxg:1 -bd -p:10 -bgc:base-2">Item</div>
  <div class="-bd -p:10 -bgc:base-2" style="flex-grow: 2">Item</div>
  <div class="-fxg:1 -bd -p:10 -bgc:base-2">Item</div>
</div>

Grid

Shorthand Property To Class BP
gt grid-template - ✔
gta grid-template-areas - ✔
gtc grid-template-columns subgrid ✔
gtr grid-template-rows subgrid ✔
gaf grid-auto-flow column,
row		 ✔
gar grid-auto-rows - -
gac grid-auto-columns - -
ga grid-area 1/1 ✔
gc grid-column 1/-1 ✔
gr grid-row 1/-1 ✔
gcs grid-column-start - -
grs grid-row-start - -
gce grid-column-end - -
gre grid-row-end - -
↓
Examples
Item A
Item B
Item C
<div class="l--grid -g:20 -gtc" style="--gtc: repeat(2, 1fr)">
  <div class="-gc:1/-1 -bd -p:10 -bgc:base-2">Item A</div>
  <div class="-bd -p:10 -bgc:base-2">Item B</div>
  <div class="-bd -p:10 -bgc:base-2">Item C</div>
</div>

Places

Shorthand Property To Class BP
ai align-items center, start, end, flex-start, flex-end, stretch ✔
ac align-content center, start, end, flex-start, flex-end, between ✔
ji justify-items center, start, end, flex-start, flex-end, stretch ✔
jc justify-content center, start, end, flex-start, flex-end, between ✔
pi place-items center, start, end -
pc place-content center, start, end -
aslf align-self center, start, end, stretch -
jslf justify-self center, start, end, stretch -
pslf place-self center, start, end -
order order -1, 0, 1 ✔
↓
Examples
Item 1
Item 2
<div class="l--flex -jc:between">
  <div class="-bd -p:10 -bgc:base-2">Item 1</div>
  <div class="-bd -p:10 -bgc:base-2">Item 2</div>
</div>

Styling

Shadow & Radius

Shorthand Property To Class BP
bxsh box-shadow 0, SHADOW ✔
bdrs border-radius 0, RADIUS,
inner		 ✔
bdrs-tl border-top-left-radius - -
bdrs-tr border-top-right-radius - -
bdrs-br border-bottom-right-radius - -
bdrs-bl border-bottom-left-radius - -
bdrs-ss border-start-start-radius - -
bdrs-se border-start-end-radius - -
bdrs-es border-end-start-radius - -
bdrs-ee border-end-end-radius - -
↓
Examples
Box
<div class="-bxsh:20 -bdrs:20 -p:20 -bd">Box</div>

Border

Shorthand Property To Class BP
bd border none -
bdc --bdc brand,accent
divider,
keycolor,
inherit,
transparent,
current		 -
bds --bds dashed,dotted,double -
bdw --bdw - ✔
bd-t border-top - -
bd-r border-right - -
bd-b border-bottom - -
bd-l border-left - -
bd-x border-inline - -
bd-y border-block - -
bd-s border-inline-start - -
bd-e border-inline-end - -
bd-bs border-block-start - -
bd-be border-block-end - -
↓
Examples

Box

<div class="-bd -bdc:current -bds:dashed -p:20" style="--bdw:2px"><p>Box</p></div>

borderに関する仕様は少し特殊になっていますので、詳しくはborderページをご覧ください。

-bd

ボーダーを指定する -bd Property Class と関連するCSS変数の使い方について解説します。

Background

Shorthand Property To Class BP
bg background - -
bgc background-color brand,accent
base,base-2,
text,
keycolor,
inherit,
transparent,
current		 -
bgi background-image - -
bgr background-repeat no-repeat -
bgp background-position center -
bgsz background-size cover,contain -

Other Properties

Shorthand Property To Class BP
float float left,right -
clear clear both -
iso isolation isolate -
wm writing-mode vertical-rl ✔
whs white-space nowrap -
↓
Examples: smサイズ以上で縦書きにする例

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

リサイズ 
<div class="l--flow has--gutter -py:20 -w:100% -h -wm_sm" style="--h: 20em; --wm_sm: vertical-rl">
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  <p>
    Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。
  </p>
</div>

hover

Lism では、:hover時のスタイルは-hov:で始まるProperty Classで定義します。

ただし、-hov系クラスは通常のProperty Classと比べて少し特殊な仕組みで動作します。

詳しくはhoverページをご覧ください。

-hov

hover時の挙動をコントロールする -hov Property Class の使い方について解説します。

© 2026 Lism CSS.