Lism CSS
検索

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でカスタマイズすることで、出力するクラスの種類は変更できます。

このページの表の見方

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

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

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

Typography

ShorthandPropertyTo ClassBP
ffontinherit-
fzfont-sizeFZ✔
fffont-familyFF-
fwfont-weightFW-
fsfont-styleitalic-
lhline-heightLH,
1		-
ltsletter-spacingLTS-
tatext-aligncenter
left
right		-
tdtext-decorationnone-
tttext-transformupper
lower		-
↓
Examples

Example text

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

Colors

ShorthandPropertyTo ClassBP
ccolorbrand,accent
text,text-2,
base,
inherit		-
bgcbackground-colorbrand,accent
base,base-2,
text,
inherit
transparent		-
bdc--bdcbrand,accent
divider,
inherit,
transparent,
current		-
↓
Examples

Example text

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

関連トークン: COLOR

Spacing

Padding

ShorthandPropertyTo ClassBP
ppaddingSPACE✔
pxpadding-inlineSPACE✔
pypadding-blockSPACE✔
pspadding-inline-start-✔
pepadding-inline-end-✔
pbspadding-block-start-✔
pbepadding-block-end-✔
plpadding-left--
prpadding-right--
ptpadding-top--
pbpadding-bottom--

Margin

ShorthandPropertyTo ClassBP
mmarginauto, SPACE✔
mxmargin-inlineauto, SPACE✔
mymargin-blockauto, SPACE✔
msmargin-inline-startauto✔
memargin-inline-endauto✔
mbsmargin-block-startauto, SPACE✔
mbemargin-block-endauto✔
mlmargin-left--
mrmargin-right--
mtmargin-top--
mbmargin-bottom--
↓
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

ShorthandPropertyTo ClassBP
wwidth100%,
fit(fit-content)		✔
hheight100%,
fit(fit-content)		✔
max-wmax-width100%✔
max-hmax-height100%✔
min-wmin-width100%✔
min-hmin-height100%✔
szinline-size--
max-szmax-inline-sizexs,s,m,l,xl,bleed,full-
min-szmin-inline-size--
bszblock-size--
max-bszmax-block-size--
min-bszmin-block-size--

関連トークン: SIZE

↓
Examples

Example text

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

Displays

ShorthandPropTo ClassBP
ddisplaynone,
block,
flex,
inline-flex,
grid,
inline-grid,
inline,
inline-block		✔ lg
vvisibilityhidden-
oopacityOPACITY, 0-
ovoverflowauto, clip, hidden-
ov-xoverflow-xauto, clip, scroll-
ov-yoverflow-yauto, clip, scroll-
ovwoverflow-wrapanywhere-
araspect-ratio21/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

ShorthandPropTo ClassBP
pospositionrelative,
absolute,
static,
fixed,
sticky		-
ttop0,50%,100%-
lleft0,50%,100%-
rright0,50%,100%-
bbottom0,50%,100%-
zz-index-1, 0, 1, 99-
iinset0-
i-xinset-inline--
i-yinset-block--
i-sinset-inline-start--
i-einset-inline-end--
i-bsinset-block-start--
i-beinset-block-end--

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

↓

配置の指定例

A
B
C
D
E
F
G
H
I
リサイズ 
<div class="l--box -pos:relative -ar:16/9 -lh:1 -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

ShorthandPropertyTo ClassBP
ggapSPACE,inherit✔ lg
cgcolumn-gap--
rgrow-gap--

Flex

ShorthandPropTo ClassBP
fxwflex-wrapwrap✔
fxdflex-directioncolumn,
column-reverse,
row-reverse		✔
fxflex1✔
fxshflex-shrink0-
fxgflex-grow1-
fxbflex-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

ShorthandPropTo ClassBP
gtgrid-template-✔
gtagrid-template-areas-✔ lg
gtcgrid-template-columnssubgrid✔ lg
gtrgrid-template-rowssubgrid✔ lg
gafgrid-auto-flowcolumn,
row		✔
gargrid-auto-rows--
gacgrid-auto-columns--
gagrid-area1/1✔ lg
gcgrid-column1/-1✔ lg
grgrid-row1/-1✔ lg
gcsgrid-column-start--
grsgrid-row-start--
gcegrid-column-end--
gregrid-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

ShorthandPropTo ClassBP
aialign-itemscenter, start, end, flex-start, flex-end, stretch✔
acalign-contentcenter, start, end, flex-start, flex-end, between✔
jijustify-itemscenter, start, end, flex-start, flex-end, stretch✔
jcjustify-contentcenter, start, end, flex-start, flex-end, between✔
aslfalign-selfcenter, start, end, stretch-
jslfjustify-selfcenter, start, end, stretch-
orderorder-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

ShorthandPropTo ClassBP
bxshbox-shadowSHADOW✔
bdrsborder-radiusRADIUS✔
↓
Examples
Box
<div class="-bxsh:20 -bdrs:20 -p:20 -bd">Box</div>

Border

ShorthandPropTo ClassBP
bdbordernone-
bdc--bdcbrand,accent
divider,
inherit,
transparent,
current		-
bds--bdsdashed,dotted,double-
bdw--bdw-✔
bd-tborder-top--
bd-rborder-right--
bd-bborder-bottom--
bd-lborder-left--
bd-xborder-inline--
bd-yborder-block--
bd-sborder-inline-start--
bd-eborder-inline-end--
bd-bsborder-block-start--
bd-beborder-block-end--
↓
Examples

Box

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

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

-bd

ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。

Background

ShorthandPropTo ClassBP
bgbackground--
bgcbackground-colorbrand,accent
base,base-2,
text,
inherit
transparent		-
bgibackground-image--
bgrbackground-repeatno-repeat-
bgpbackground-positioncenter-
bgszbackground-sizecover,contain-

Other Properties

ShorthandPropTo ClassBP
floatfloatleft,right-
clearclearboth-
isoisolationisolate-
wmwriting-modevertical-rl✔
whswhite-spacenowrap-
↓
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クラスで定義します。

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

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

-hov

hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。

© Lism CSS. All rights reserved.

目次