コンテンツにスキップ
Lism CSS

Prop Class

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

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

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

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

このページの表の見方

Section titled “このページの表の見方”

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

カラム名説明
PropertyCSSプロパティ
Shorthandその省略形。Propクラスの-{prop}:{val}の{prop}にあたる文字列です。
また、Lismコンポーネントに指定するためのプロパティ名もこの文字列です。
To ClassProp Utility クラスとして出力される値
BPブレイクポイント対応クラス（-{prop}_{bp}）サポートの有無

省略形の文字列(Shorthand)は、クラスとして出力されます。また、Lismコンポーネントに指定するプロパティも、この文字列です。

Typography

Section titled “Typography”
PropertyShorthandTo ClassBP
fontfinherit-
font-sizefzFZ○
font-familyffFF-
font-weightfwFW-
font-stylefsitalic-
line-heightlhLH,
1		-
letter-spacingltsLTS-
text-aligntacenter
left
right		-
text-decorationtdnone-
text-transformttupper
lower		-
↓
Examples

Example text

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

Colors

Section titled “Colors”
PropertyShorthandTo ClassBP
colorcbrand,accent
text,text-2,
base,
inherit
transparent		-
background-colorbgcbrand,accent
base,base-2,
text,
inherit
transparent		-
--bdcbdcbrand,accent
line,
inherit,
transparent		-
↓
Examples

Example text 

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

関連トークン: COLOR

Spacing

Section titled “Spacing”

Padding

Section titled “Padding”
PropertyShorthandTo ClassBP
paddingpSPACE○
padding-inlinepxSPACE○
padding-blockpySPACE○
padding-inline-startpx-s-○
padding-inline-endpx-e-○
padding-block-startpy-s-○
padding-block-endpy-e-○
padding-leftpl-○
padding-rightpr-○
padding-toppt-○
padding-bottompb-○

Margin

Section titled “Margin”
PropertyShorthandTo ClassBP
marginmauto, SPACE○
margin-inlinemxauto, SPACE○
margin-blockmyauto, SPACE○
margin-inline-startmx-sauto○
margin-inline-endmx-eauto○
margin-block-startmy-sauto, SPACE○
margin-block-endmy-eauto○
margin-leftmlauto○
margin-rightmrauto○
margin-topmtauto○
margin-bottommbauto○
↓
Space Examples

Example text

Example text

リサイズ可能 
<div class="-p:15 -p_sm -bd" style="--p_sm:var(--s20)">
  <p>Example text</p>
  <p class="-my-s:15 -mx:20">Example text</p>
</div>

Width & Height

Section titled “Width & Height”
PropertyShorthandTo ClassBP
widthw100%,
fit(fit-content)		○
heighth100%○
max-widthmax-w100%○
max-heightmax-h100%○
min-widthmin-w100%○
min-heightmin-h100%○
inline-sizesz--
max-inline-sizemax-szs,m,l,xl,full,container-
min-inline-sizemin-sz--
block-sizeysz--
max-block-sizemax-ysz--
min-block-sizemin-ysz--

関連トークン: SIZE

Displays

Section titled “Displays”
PropShorthandTo ClassBP
displaydnone,
block,
in-flex(inline-flex)		○
visibilityvhidden-
opacityopOPACITY, 0-
overflowovauto, clip, hidden-
overflow-xovxauto, clip, scroll-
overflow-yovyauto, clip, scroll-
aspect-ratioar21/9,16/9,3/2,1/1,
og		○

Positions

Section titled “Positions”
PropShorthandTo ClassBP
positionposrel(relative),
abs(absolute),
static,
fixed,
sticky		-
topt0,50%,100%-
leftl0,50%,100%-
rightr0,50%,100%-
bottomb0,50%,100%-
z-indexz-1, 0, 1, 99-
inseti0-
inset-inlinei-x--
inset-blocki-y--
inset-inline-starti-x-s--
inset-inline-endi-x-e--
inset-block-starti-y-s--
inset-block-endi-y-e--

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

↓

配置の指定例

A
B
C
D
E
F
G
H
I
リサイズ可能 
<Box pos='rel' ar='3/2' lh='1' ff='mono'>
  <HTML.div pos='abs' l='0' t='0' bgc='base-2' bd p='10'>A</HTML.div>
  <HTML.div pos='abs' l='0' r='0' w='fit' mx='auto' bgc='base-2' bd p='10'>B</HTML.div>
  <HTML.div pos='abs' r='0' t='0' bgc='base-2' bd p='10'>C</HTML.div>
  <HTML.div pos='abs' l='0' t='0' b='0' h='fit' my='auto' bgc='base-2' bd p='10'>D</HTML.div>
  <HTML.div pos='abs' i='0' m='auto' w='fit' h='fit' bgc='base-2' bd p='10'>E</HTML.div>
  <HTML.div pos='abs' r='0' t='0' b='0' h='fit' my='auto' bgc='base-2' bd p='10'>F</HTML.div>
  <HTML.div pos='abs' l='0' b='0' bgc='base-2' bd p='10'>G</HTML.div>
  <HTML.div pos='abs' l='0' r='0' b='0' w='fit' mx='auto' bgc='base-2' bd p='10'>H</HTML.div>
  <HTML.div pos='abs' r='0' b='0' bgc='base-2' bd p='10'>I</HTML.div>
</Box>

Layouts

Section titled “Layouts”

Gap

Section titled “Gap”
PropertyShorthandTo ClassBP
gapgSPACE,inherit○
column-gapg-x-○
row-gapg-y-○

Flex

Section titled “Flex”
PropShorthandTo ClassBP
flex-wrapfxwwrap○
flex-directionfxdcol(column),
col-r(column-reverse),
row-r(row-reverse)		○
flexfx1○
flex-shrinkfxsh0-
flex-growfxg1-
flex-basisfxb-○

Grid

Section titled “Grid”
PropShorthandTo ClassBP
grid-templategt-○
grid-template-areasgta-○
grid-template-columnsgtcsubgrid○
grid-template-rowsgtrsubgrid○
grid-auto-flowgafcol(column),
row		○
grid-auto-rowsgar--
grid-auto-columnsgac--
grid-areaga1/1○
grid-columngc1/-1○
grid-rowgr1/-1○
grid-column-startgcs--
grid-row-startgrs--
grid-column-endgce--
grid-row-endgre--

Places

Section titled “Places”
PropShorthandTo ClassBP
align-itemsaicenter, start, end, flex-s, flex-e, stretch⚪︎
align-contentaccenter, start, end, flex-s, flex-e, between⚪︎
justify-itemsjicenter, start, end, flex-s, flex-e, stretch⚪︎
justify-contentjccenter, start, end, flex-s, flex-e, between⚪︎
align-selfaslfcenter, start, end, stretch-
justify-selfjslfcenter, start, end, stretch-
orderorder-1, 0, 1-

Styling

Section titled “Styling”

Background

Section titled “Background”
PropShorthandTo ClassBP
backgroundbg-⚪︎

Shadow

Section titled “Shadow”
PropShorthandTo ClassBP
box-shadowbxshSHADOW-

Radius

Section titled “Radius”
PropShorthandTo ClassBP
border-radiusbdrsRADIUS○

Border

Section titled “Border”
PropShorthandTo ClassBP
borderbdnone-
--bdcbdcdivider(--divider), inherit-
--bdsbdsdashed,dotted,double-
--bdwbdw-○
border-topbd-t--
border-rightbd-r--
border-bottombd-b--
border-leftbd-l--
border-inlinebd-x--
border-blockbd-y--
border-inline-startbd-x-s--
border-inline-endbd-x-e--
border-block-startbd-y-s--
border-block-endbd-y-e--

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

Other CSS

Section titled “Other CSS”
PropShorthandTo ClassBP
floatfloatleft,right-
clearclearboth-
isolationisolationisolate-
overflow-wrapovwrapany(anywhere)-
white-spacewhitespacenowrap-