Lism Tips
Lism CSS（リズム CSS）の使い方を、はじめての人にも分かる言葉でまとめたリファレンスです。
2026年10月5日時点の公式ドキュメント（lism-css 1.0.1）をもとにしています。どのページでも / キーで検索を開けます。
はじめての方へ
Lism CSS をはじめて使う人は、ここから順番に読んでください。HTML と CSS のきほんから説明します。
よく引くページ
- チートシート（よく使うクラス） よく使う Lism のクラスを、並べ方・役割・余白・文字・色・枠線・配置・レスポンシブに分けて1ページで引ける早見表です。
- Property Class の書き方 Property Class は、CSS のプロパティを短いクラス名で指定するしくみです。値の決め方・任意の値・画面幅ごとの切り替えの書き方をまとめます。
- 画面の幅で切り替える（レスポンシブ） Lism CSS で、箱の幅に合わせて余白や表示を切り替える書き方です。ブレイクポイントの値、-{prop}_{bp} クラス、コンテナクエリの注意点をまとめます。
- 余白（padding・margin・gap） 余白を決める Property Class（-p・-m・-g とその向き）の一覧です。使える値は余白のトークン（-p:20 など）で、画面の幅による切り替えにも対応します。
- デザイントークン（余白・角丸・影など） Lism CSS のデザイントークン（決まった段階の値）とは何かと、角丸・影・余白・不透明さ・コンテンツの幅のトークンの一覧です。
- Primitive ってなに？（選び方） Primitive は、レイアウトを組み立てる小さな部品のクラスです。l-- と a-- の違い、一覧、列を並べるときの選び方をまとめます。
- l--stack（縦に並べる） l--stack は、中の要素を上から下へ縦に並べるクラスです。要素どうしのすきまは -g で決めます。
- is--wrapper（中身の幅をそろえる） is--wrapper は、すぐ下の子の幅の上限をそろえて真ん中に置くクラスです。上限は -contentSize（s・m・l・xl）で決めます。
すべてのページ
はじめに
Lism CSS がどんなものか、読み込み方、クラスの見分け方。はじめての人は上から順に読んでください。
しくみ
Lism の考え方、CSS のレイヤー、名前の付け方、最初から付いているスタイル。
デザイントークン
余白・文字・色など、サイト全体で使う「決まった値」のセット。
Property Class
「-p:20」のように、CSS の1つの性質を1つのクラスで指定する書き方と、その一覧。
レイアウト（Primitive）
縦に並べる・横に並べる・列に分けるなど、レイアウトの部品になるクラス。
- Primitive ってなに？（選び方）
- l--box（まとめる箱）
- l--flow（文章の間をあける）
- l--stack（縦に並べる）
- l--cluster（横に並べて折り返す）
- l--flex（Flexbox で並べる）
- l--grid（Grid で並べる）
- l--columns（同じ幅の列に分ける）
- l--autoColumns（列の数を自動で決める）
- l--tileGrid（タイル状に並べる）
- l--switchColumns（横並びと縦並びを切り替える）
- l--withSide（メインと横の2列）
- l--center（真ん中に置く）
- l--frame（画像や動画の枠）
- a--divider（区切り線）
- a--spacer（すきまを空ける）
- a--icon（アイコン）
- a--decorator（飾りの要素）
役割と機能（Trait Class）
is-- で役割を、has-- で機能を要素に付けるクラス。
Set Class・Utility Class
見た目のリセットや変数の準備をする set-- と、まとまった装飾の u--。
カスタマイズ
設定ファイルや SCSS で値・クラスを変える方法と、使わない CSS の削除。
React・Astro コンポーネント
React や Astro で、クラスの代わりに Props で Lism を書く方法。
UI コンポーネント
@lism-css/ui に入っている、ボタン・タブ・モーダルなどの部品。
作例
Lism のクラスを組み合わせて作る、よくある部品の作り方。
AI ツールと更新情報
AI に Lism を教える方法と、バージョンごとの変更。