文字の色と背景

文字の色（-c）・背景の色（-bgc）・枠線の色（-bdc）と、背景の画像などを決めるクラスの一覧です。よく使う色はクラスになっていて、それ以外の色は style 属性の変数で渡します。

どんなときに使う？#

• 文字をサイトのブランドカラー（サイトを代表する色）にしたいとき（-c:brand）
• 箱にうすい背景色を付けたいとき（-bgc:base-2）
• パレットの赤や青など、クラスに無い色を使いたいとき（-c と --c）

使い方#

<p class="-c:brand -bgc:base-2 -bdc:current -bd -p:30 -fz:l -fw:700">ブランドカラーの文字</p>

-c は color（文字の色）、-bgc は background-color（背景の色）、-bdc は border-color（枠線の色）の略です。-bdc:current は、枠線を文字と同じ色にします。

色のクラスの一覧#

• current は currentColor（その要素の文字の色）の略です
• keycolor は、--keycolor 変数に入れた色を使います（下の「keycolor を使う」）
• -bdc は色を決めるだけです。枠線を出すには -bd も付けます（枠線・角丸・影（-bd など））

それぞれの色の意味（base は背景、text は文字など）は 色のトークン で説明しています。

<div class="l--stack -g:10">
  <p class="-c:brand -fz:l -fw:700">-c:brand</p>
  <p class="-c:accent -fz:l -fw:700">-c:accent</p>
  <p class="-c:text-2">-c:text-2</p>
  <p class="-c:base -bgc:text -p:10">-c:base と -bgc:text</p>
  <p class="-c:base -bgc:brand -p:10 -fz:l -fw:700">-c:base と -bgc:brand</p>
</div>

クラスに無い色を使う#

main.css でクラスになっているのは、上の表の値だけです。パレットの色（red・blue など）を使うときは、値の無いクラス -c・-bgc を付けて、style 属性の変数で色を渡します。

<div class="l--stack -g:10">
  <p class="-c -fz:l -fw:700" style="--c: var(--red)">--c に赤を入れた文字</p>
  <p class="-bgc -p:10" style="--bgc: var(--yellow)">--bgc に黄色を入れた背景</p>
</div>

パレットの色は red・orange・yellow・green・blue・purple・pink・gray・black・white の10色です。

keycolor を使う#

--keycolor は、その場所の「基本の色」を入れておく変数です。-c:keycolor・-bgc:keycolor・-bdc:keycolor は、この変数の色を使います。

<div class="l--stack -g:10" style="--keycolor: var(--purple)">
  <p class="-c:keycolor -fz:l -fw:700">-c:keycolor</p>
  <p class="-bgc:keycolor -c:base -p:10 -fz:l -fw:700">-bgc:keycolor</p>
</div>

--keycolor を1か所変えるだけで、中の色がまとめて変わります。--keycolor から文字・背景・枠線の色をまとめて作るクラスに、Utility Class の u--cbox があります。

背景のクラスの一覧#

• bgr は背景をくり返すか、bgp は背景をどこに置くか、bgsz は背景の大きさを決めます
• -bgsz:cover は箱をすき間なくおおう大きさ、-bgsz:contain は全体が箱に収まる大きさにします

<div class="-bgi -bgr:no-repeat -bgp:center -bgsz:cover" style="--bgi: url(image.jpg)">…</div>

色はどれも画面の幅で切り替えられない#

この表のクラスは、どれも BP が - です。幅によって色を変えるには、設定で追加します（lism.config.js で設定する）。full.css に替えると、lh・枠線（bd とその向き）・変数だけを出すプロパティを除く、すべての Property Class に幅のクラス（-ta_lg など）が付きます（CSS ファイルの種類）。

React・Astro で書く場合#

<Text c="brand" bgc="base-2" bd bdc="current" p="30">
  Example text
</Text>
<Lism keycolor="red" c="keycolor">赤い文字</Lism>

コンポーネントでは、bgc="black:50%"（黒を 50% 透かす）や c="text:blue:5%"（text に blue を 5% 混ぜる）のように、: で区切って色を混ぜることもできます。くわしくは Lism Props（コンポーネントの指定） にあります。

関連するページ#

• 色のトークン
• 枠線・角丸・影（-bd など）
• Utility Class（u--*）
• Property Class の書き方