---
title: "Lism CSSとは？v1.1の使い方とクラス体系・Tailwindとの違い"
url: "https://www.issoh.co.jp/tech/details/7298/"
published: 2025-06-18
updated: 2026-11-05
categories: ["フレームワーク"]
publisher: "株式会社一創"
---

# Lism CSSとは？v1.1の使い方とクラス体系・Tailwindとの違い

Lism CSSは、WordPressテーマSWELLの開発者である了（GitHub: ddryo）が開発している、Webサイトのレイアウトを組むためのCSS設計フレームワークです。ライセンスはMITで、CSSファイルを1本読み込めばビルドなしで動きます。2025年6月11日にnpmで0.1.0が公開され、2026年10月1日に最初の安定版1.0.0、10月29日に1.1.0が出ました。

この記事では、1.1.0のリポジトリとnpm配布物を一次情報にして、クラス接頭辞と`@layer`の構造、導入手順、主要なレイアウトプリミティブ、Tailwind CSSとの違いを整理します。あわせて、0.x系から1.xへ上げたときに見た目が変わる箇所と、コンテナクエリ既定のレスポンシブの落とし穴を、配布CSSをChromeで描画して確かめた結果で示します。

## まとめ：Lism CSSの要点と採用判断

- **何者か**：Every Layoutのレイアウトプリミティブと、Tailwind CSSの単一プロパティ単位のクラスを参考にした日本発のCSSフレームワークです。すべてをクラスで書き切る方式ではなく、細部はネイティブCSSで書く前提です。
- **現行版**：2026年11月5日時点の最新は1.1.0です。1.0.0は「最初の安定版」で、0.31.0からの機能変更はありません。
- **クラス体系**：`l--`（レイアウト）、`is--`／`has--`（Trait）、`-p:20`形式のProperty Classなど、接頭辞で役割が分かれます。優先順位は6つの`@layer`の宣言順で決まり、Property Classはレイヤーの外に置かれています。
- **レスポンシブの落とし穴**：既定はコンテナクエリです。祖先にクエリコンテナが無いと、`-p_md`などのブレークポイント用クラスは画面幅に関係なく効きません。
- **0.x系からの更新**：0.31.0で`lism-component`レイヤーが消えたため、配布CSSの後で`@layer lism-component`に書いた自作CSSは、通常宣言同士ならユーティリティより優先されるようになります。1.1.0では見出しや`strong`の太さが600から700に変わります。
- **採用判断**：1.0で破壊的変更の連続は止まり、非推奨の項目は「v2で削除」と予告されるようになりました。ただし内部ファイルを直接指すパスのうち、公開APIとして保証されるのは`lism-css/lib/getLismProps`だけで、UIコンポーネント集の`@lism-css/ui`はまだ0.x系です。

## Lism CSSの成り立ちと設計の考え方

[公式ドキュメントの概要ページ](https://lism-css.com/docs/overview/)は、Every Layoutからレイアウトプリミティブとハーモニックモジュラースケーリングを、Tailwind CSSからCSSプロパティ単位のクラスという発想を取り入れたと説明しています。コンポーネントの使い心地はChakra UIとMUIを参考にしたと明記されています。

Tailwind CSSとの一番の違いは、CSSを書くことを前提にしている点です。公式の特徴ページでは、主要なレイアウトや軽い装飾はクラスとCSS変数で組み、細部の作り込みはネイティブCSSで整えるという役割分担を示しています。HTMLのclass属性にすべてのスタイルを並べる書き方にはなりません。

開発の動機は、作者が2026年4月7日にZennで公開した[こんなAI時代に、新しいCSS設計フレームワークを作る理由](https://zenn.dev/ddryo%5Floos/articles/why-create-new-css-framework-in-ai-era)に書かれています。人もAIも同じ規則でCSSを書ける設計の標準が無い、という問題意識です。同じ記事で作者自身が「学習コストはかなり高め」と書いており、着手から3年以上かかったことにも触れています。なお、「Lism」という名前の由来は公式ドキュメントにもREADMEにも書かれていません。

## クラス接頭辞と@layerの構造

クラスは接頭辞で役割が分かれています。READMEのクラス例を整理すると次のとおりです。

| 種類             | 接頭辞            | 例                             |
| -------------- | -------------- | ----------------------------- |
| レイアウトプリミティブ    | `l--`          | `l--stack`・`l--withSide`      |
| Trait Class    | `is--`・`has--` | `is--container`・`has--gutter` |
| Block Class    | `b--`          | `b--btn`・`b--badge`           |
| Custom Class   | `c--`          | `c--siteHeader`               |
| Property Class | `-`            | `-p:20`・`-fz:l`               |
| ブレークポイント       | `_sm`等         | `-p_sm`・`-g_md`               |
| ユーティリティ        | `u--`          | `u--cbox`・`u--trim`           |

優先順位はカスケードレイヤーで管理します。1.1.0の`main.css`の先頭は`@layer lism-base, lism-block, lism-trait, lism-primitive, lism-custom, lism-utility;`の6層です。同じオリジンの通常宣言では後のレイヤーほど優先され、`!important`宣言同士では順序が逆転します。`lism-base`の中には`reset`、`lism-primitive`の中には`layout`と`atomic`のサブレイヤーがあります。自作のクラスを書く場所として用意されているのが`lism-custom`です。

配布CSSを解析すると、`-p:20`や`-fz:l`などのProperty Classは`@layer`の外に出力されていました。同じオリジンの通常宣言同士では、レイヤー外のスタイルがレイヤー内のスタイルより優先されるので、`class="c--card -p:30"`のように書けば、`lism-custom`で定義した余白をProperty Classで上書きできます。0.29.1ではREADMEの6層と配布CSSの7層が食い違っていましたが、1.1.0では両者が揃いました。

## 導入手順：CDN・npm・React/Astro・Next.js

### CDN・npmによるCSSの読み込み

ビルド環境が無い静的サイトでは、CDNのCSSを読み込むだけで使えます。[公式のインストール手順](https://lism-css.com/docs/installation/)も版番号入りのURLを示しています。

```
<link href="https://cdn.jsdelivr.net/npm/lism-css@1.1.0/dist/css/main.css" rel="stylesheet" />
```

npmでは`npm i lism-css`のあと、エントリーポイントで`import 'lism-css/main.css';`とします。配布物には`main.css`のほか、ブレークポイント対応をほぼ全プロパティに広げ、カラーの全トークンをクラス化した`full.css`と、`@layer`を使わない`main_no_layer.css`が入っています。

ゼロから始めるなら`npm create lism@latest`が最短です。`--template`で雛形を直接指定でき、1.1.0時点の公式手順には`minimal-astro`・`minimal-vite`のほか、ブログ3種とランディングページ3種の計8種類が載っています。

### React・Astroコンポーネントの記述例

コンポーネントは`lism-css/react`と`lism-css/astro`から読み込みます。propsがクラスとCSS変数に変換される仕組みで、実行時にスタイルシートを生成しません。Reactのpeer dependenciesは`^18 || ^19`です。

```
import { Stack, Flex, Box, Text } from 'lism-css/react';

export function Cards() {
  return (
    <Stack g="20">
      <Flex g="20" ai="center">
        <Box p="20" bgc="base-2" bdrs="20"><Text fz="l">Card A</Text></Box>
        <Box p="20" bgc="base-2" bdrs="20"><Text fz="l">Card B</Text></Box>
      </Flex>
    </Stack>
  );
}
```

同じ内容をHTMLだけで書くと、`<div class="l--stack -g:20">`のようにクラスを並べる形になります。Astro自体の特徴は[Astroフレームワークとは？特徴と使い方・Next.jsとの使い分けを解説【2026年版】](/tech/details/15369/)で扱っています。

### lism.config.jsとプラグインによる設定の反映

トークンやブレークポイントを変えたいときは、プロジェクトのルートに`lism.config.js`を置き、`@lism-css/plugin`（2026年11月5日時点で0.5.1）を導入します。Vite・Astroでは統合プラグイン`lismCss()`を登録すると、設定がCSSとコンポーネントの両方に反映されます。`lismCss({ purge: true })`にすると、ビルド出力に現れないLismのクラスを削除できます。

purgeには制約があります。[CSS Purgeの公式ドキュメント](https://lism-css.com/docs/customize/purge/)によると、検出できるのはビルド出力のHTMLやJSに完全な文字列として現れるクラスだけです。Vite＋ReactのSPAや、Astroの`client:only`で描画する部分では、propsの値が静的でもクラスが削除されることがあります。SSGのAstroサイト以外で有効にするなら、`safelist`で残すクラスを指定してください。

統合プラグインを使わない構成では、`npx lism-css build`で設定を反映したCSSを生成します。これはパッケージ内の`main.css`を再ビルドするコマンドなので、公式ドキュメントは「パッケージ更新ごとにビルドが必要」と注意しています。CIで`npm ci`を走らせる構成では、インストールのあとに必ずこのビルドを挟んでください。

### Next.js 16でのwithLismの設定

Next.jsは16以降が対象です。`next.config.mjs`を`@lism-css/plugin/next`の`withLism()`で包むと、設定を反映したCSSが`.lism-css/css/`以下に事前生成され、`lism-css/main.css`のimportがそちらへ差し替わります。

```
import { withLism } from '@lism-css/plugin/next';

const nextConfig = {};
export default withLism(nextConfig);
```

同時に、追加したpropsやブレークポイントを型に反映した`lism-env.d.ts`がプロジェクト直下に生成されます。公式ドキュメントは、`tsconfig.json`の`include`に加えてgitにコミットするよう求めています。Next.jsではpurgeは未対応で、設定を反映したCSSがそのまま読み込まれます。

## 主要なレイアウトプリミティブの使い分け

Layout Primitiveは、よく使うレイアウトのパターンをクラス1つにまとめたものです。1.1.0の`main.css`には`l--`で始まるクラスが12種類あり、0.29.1から増減はありませんでした。選択に迷いやすいものを並べます。

| クラス                | React         | 向く用途               |
| ------------------ | ------------- | ------------------ |
| `l--stack`         | Stack         | 縦積み（column方向のflex） |
| `l--flow`          | Flow          | 記事本文の要素間余白         |
| `l--cluster`       | Cluster       | タグ一覧など折り返す横並び      |
| `l--flex`          | Flex          | 細かく制御する横並び         |
| `l--grid`          | Grid          | グリッドの任意配置          |
| `l--columns`       | Columns       | 等幅N列・BPで列数切替       |
| `l--autoColumns`   | AutoColumns   | 最小幅ベースの自動段組み       |
| `l--switchColumns` | SwitchColumns | 任意の幅で一括して1列化       |
| `l--withSide`      | WithSide      | サイドとメインの2カラム       |
| `l--tileGrid`      | TileGrid      | 列数×行数の均等タイル        |
| `l--center`        | Center        | 縦横中央揃え             |
| `l--frame`         | Frame         | アスペクト比固定の画像・動画     |

カラム系が4種類あるのは、切り替えの基準が違うためです。`l--columns`は固定列数でも使えますが、ブレークポイントで列数を切り替えるなら、後述の`is--container`などで祖先にクエリコンテナを設定します。一方、`l--autoColumns`は`--cols: 16em`のような最小幅で、`l--withSide`はメイン側の最小幅で自動的に折り返すため、ブレークポイントに依存しません。グリッドそのものの書き方は[CSS Gridの使い方｜auto-fitとsubgridの実装とGrid Lanes対応状況](/tech/details/17503/)が詳しいです。

古い解説記事のクラス名には注意が必要です。0.16で`l--sideMain`は`l--withSide`へ、`l--fluidCols`は`l--autoColumns`へ改名されました。Reactの旧名`SideMain`・`FluidCols`・`SwitchCols`は0.31.0まで別名として動いていましたが、そこで削除されたため、1.x系では旧名をimportしても取得できません。`WithSide`・`AutoColumns`・`SwitchColumns`へ置き換えてください。

## コンテナクエリ既定のレスポンシブと落とし穴

ブレークポイントはsmが480px、mdが800px、lgが1120pxで、それぞれ「その幅以上で効く」モバイルファーストの閾値です。Tailwind CSSの既定（sm=640px、md=768px、lg=1024px）とは値が違うので、併用や移行の際は注意してください。

書き方は、`-p_sm`のようなブレークポイント用クラスと、切り替え先の値を持つCSS変数`--p_sm`の組み合わせです。Reactでは`p={['20', '30', '40']}`のように配列で書くと、同じクラスと変数が出力されます。

```
<div class="is--container">
  <div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:var(--s40)">...</div>
</div>
```

見落としやすいのが`is--container`です。既定のブレークポイント用クラスは`@media`ではなく`@container`の中で発火します。1.1.0の`main.css`で`container-type`を宣言しているのは`.is--container{container-type:inline-size}`の1か所だけでした。独自CSSでコンテナを設定していなければ、祖先に`is--container`を付ける必要があります。

npmから取得した1.1.0の`main.css`を読み込み、上と同じ指定の要素を幅の違う3つの親に置いて、Chrome for Testing 156（ヘッドレス）で`padding-top`の計算値を取得しました。

| 親要素               | 親の幅   | padding-top | 効いた値         |
| ----------------- | ----- | ----------- | ------------ |
| `is--container`あり | 900px | 40px        | `--s40`（md）  |
| `is--container`あり | 600px | 24px        | `--s30`（sm）  |
| `is--container`なし | 900px | 16px        | `--s20`（基準値） |

親の幅が900pxあっても、`is--container`が無い3行目はmdの値に切り替わりませんでした。エラーも警告も出ないため、原因に気づきにくい挙動です。0.29.1でも同じ結果だったので、1.0で変わった点ではありません。ページ全体をレスポンシブにしたいなら、body直下のラッパーなど上位の要素に`is--container`を付けておくのが確実です。コンテナクエリの仕組みは[CSSコンテナクエリ（@container）の使い方｜container-type・cqi単位・メディアクエリとの違い](/tech/details/4708/)で解説しています。

画面幅を基準にしたい場合は、SCSSの設定変数`$is_container_query`を`0`にすると、ブレークポイント用クラスがメディアクエリで出力されます。

## 0.x系から1.xへ上げるときに見た目が変わる箇所

1.0.0の[変更履歴](https://lism-css.com/docs/changelog/)は「v0.31.0からの機能の変更はありません」と書いています。破壊的変更は1つ前の0.31.0（2026年9月30日）にまとめて入りました。0.29以前から上げる場合に確認する項目は次のとおりです。

| 版      | 変更                     | 対応                            |
| ------ | ---------------------- | ----------------------------- |
| 0.31.0 | `lism-component`レイヤー削除 | `lism-block`か`lism-custom`へ移す |
| 0.31.0 | SideMain等の旧名を削除        | WithSide等へ置換                  |
| 0.31.0 | `_propConfig`を削除       | `lism.config.js`のpropsで設定     |
| 1.1.0  | `--fw--bold`が600から700  | 600に戻すなら`:root`で上書き           |
| 1.1.0  | `has--gutter`の変数名変更    | `--gutter-px`へ移行（旧名はv2で削除）    |

### 旧lism-componentレイヤーの読み込み順と優先順位

一番気づきにくいのが、レイヤー削除による優先順位の逆転です。0.29.1までの`main.css`は`lism-component`を`lism-primitive`と`lism-custom`の間で宣言していたので、そこに書いたCSSは`lism-utility`より弱い位置にありました。1.xでは宣言そのものが無くなったため、配布CSSの後で自作CSSの`@layer lism-component`を初めて宣言すると、そのレイヤーは既存の6層の後ろに追加され、通常宣言同士ではそれらより優先されます。

実際に、`@layer lism-component { .x { margin-block: 5px; } }`を書いたうえで`class="u--trim x"`の段落（font-size 16px・line-height 2）の`margin-top`を測りました。0.29.1では`u--trim`が勝って`-8px`、1.1.0では`.x`が勝って`5px`です。ビルド時にエラーが出ない変更なので、更新後に余白やリーディングトリムが効かなくなった箇所があれば、まず`lism-component`の残りを探してください。`lism-cli ui add`で0.26.0より前に追加したUIコンポーネントの`_style.css`にも、この宣言が残っています。

### 1.1.0での見出し・太字の既定ウェイト変更

1.1.0では`--fw--bold`の既定値が600から700に変わりました。同じ条件で測ると、`h2`の`font-weight`は0.29.1で600、1.1.0で700です。`th`はどちらも700でしたが、これまではブラウザ標準の`bold`で、1.1.0からは`--fw--bold`を参照するようになりました。600のまま使うなら`:root{--fw--bold:600}`を足すか、`lism.config.js`の`tokens`に`fw: { bold: '600' }`を指定します。

サイト全体の見出しの印象が変わるので、デザインカンプとの照合がある案件では、1.0.1から1.1.0への更新もマイナー版だからと流さず、表示確認を挟むべきです。

## Tailwind CSSとの違い

両者はプロパティ単位のクラスを持つ点では似ていますが、前提がかなり違います。

| 観点       | Lism CSS 1.1       | Tailwind CSS v4          |
| -------- | ------------------ | ------------------------ |
| ビルド      | 不要（CDNのCSSで本番可）    | 必要（Play CDNは開発専用）        |
| レイアウト    | プリミティブのクラス         | ユーティリティの組み合わせ            |
| レスポンシブ既定 | コンテナクエリ            | メディアクエリ                  |
| BPの値     | 480／800／1120px     | 640／768／1024／1280／1536px |
| CSSを書くこと | 前提（`lism-custom`層） | クラスで完結させる方向              |
| 未使用クラス   | 全部入り（purgeは任意）     | 使った分だけ生成                 |

Tailwind CSSの[Play CDNの公式ドキュメント](https://tailwindcss.com/docs/installation/play-cdn)は、Play CDNを開発目的専用で本番向けではないと明記しています。Tailwind CSS v4もコンテナクエリをコア機能として持っていますが、`@container`クラスと`@md:`接頭辞で明示的に書く方式で、既定の`md:`は画面幅基準です。v4の詳細は[Tailwind CSS v3とv4の違い｜破壊的変更と移行手順をv4.3の実ビルドで検証【2026年11月】](/tech/details/5060/)で整理しています。

Lism CSSのProperty Classは、すべてのプロパティとブレークポイントの組み合わせを用意するのではなく、CSS変数と組み合わせてクラス数を抑えています。クラスだけでUIを完結させたいチームにはTailwind CSSやUnoCSSが合い、HTMLを読みやすく保ちながらCSSも書きたいチームにはLism CSSが合います。型付きのCSS-in-JSを含めた別の選択肢は、[UnoCSSとは？アトミックCSSエンジンの設定と採用判断を実装目線で解説](/tech/details/16477/)と[Panda CSSとは？型付きスタイル生成の設定と採用判断を実装目線で解説](/tech/details/16479/)で比べられます。

## 1.0で安定した範囲とまだ動く範囲から見た採用判断

2026年8月16日から9月13日までの4週間には、コアの0.27.0・0.28.0・0.29.0で破壊的変更があり、UIパッケージの0.26.0にも破壊的変更がありました。1.0.0以降のリリースは、10月2日の1.0.1と10月29日の1.1.0の2回で、どちらも破壊的変更の表記はありません。1.1.0で非推奨にした`--gutter--base`と`--gutter`も「1.xの間は互換として残す」「v2で削除する予定」と書かれ、すぐには消えません。

一方で、1.0の約束には範囲があります。

- **JSの公開API**：1.0.0の変更履歴は、`lism-css/lib/`・`react/`・`astro/`以下のファイルを直接指すパスのうち、公開APIは`lism-css/lib/getLismProps`だけで、それ以外はマイナー版の更新でも変わりうるとしています。
- **UIコンポーネント**：`@lism-css/ui`は2026年11月5日時点で0.40.1で、9月22日の0.30.0では`Tabs.Tab`が`button`固定になる破壊的変更が入りました。
- **見た目の既定値**：前の章の太字のように、破壊的変更と書かれていなくても表示は変わります。

この範囲を踏まえた判断は次のとおりです。

- **向いている**：コーポレートサイト、LP、個人ブログなど、CSSファイル1本で完結させたいサイト。CDNの版固定URLとHTMLだけで運用できます。1.xでは非推奨項目の互換維持方針が示されていますが、更新時には変更履歴と表示の確認が必要です。公開後の保守を少人数で回すサイトほど、ビルド環境を持たない構成の利点が出ます。[企業サイト制作・コーポレートサイト制作](/service/web/corporate/)でCSSの技術選定から相談する場合も、この条件が判断の目安になります。
- **慎重に判断すべき**：`@lism-css/ui`のコンポーネントを多用する構成や、内部パスを直接importしているコード。コア側が1.xでも、UI側は0.x系の変更を受けます。
- **避けたほうがよい**：クラスだけで全スタイルを書きたいチーム。作者自身が学習コストの高さを認めており、CSSを書く層（`lism-custom`）を使わないなら、Tailwind CSSの方が情報も周辺ツールも多い選択です。

配布CSSの容量も確かめました。READMEは1.1.0でも「CSSバンドル全体で約30 KB（gzip圧縮時約8 KB）」と書いていますが、npmから取得した1.1.0の`main.css`は39,234バイト、`gzip -c`（既定の圧縮レベル）で9,718バイトでした。`full.css`は同じ条件で50,106バイト（圧縮後11,950バイト）です。0.29.1の`main.css`とは6バイトしか違わず、1.0への移行で容量はほぼ変わっていません。容量を比べるときは、READMEの数値ではなく実ファイルを測ってください。

## よくある質問

### Lism CSSは無料で商用利用できますか？

できます。`lism-css`パッケージとGitHubリポジトリのライセンスはMITです。

### Lism CSSにビルドツールは必要ですか？

必要ありません。CDNの`main.css`を読み込めば素のHTMLで動きます。トークンの値はCSS変数の上書きでも変えられます。`lism.config.js`を反映したり、未使用クラスを削除したりする場合は、`@lism-css/plugin`とビルド環境が必要です。

### レスポンシブ用のクラスが効かないのはなぜですか？

祖先要素にクエリコンテナ（`is--container`、または独自CSSの`container-type`指定）が無い可能性が高いです。既定のブレークポイント用クラスはコンテナクエリで発火するため、コンテナが無いと親の幅に関係なく基準値のままになります。

### Lism CSSはWordPressテーマSWELLと関係がありますか？

作者が同じです。SWELLの開発者である了がLism CSSを開発しています。`lism-css`パッケージ自体はWordPressに依存せず、npmの依存は`csstype`だけです。

### Lism CSSはAIのコーディング支援に対応していますか？

対応しています。`@lism-css/mcp`（1.1.0）のMCPサーバーは`claude mcp add lism-css -- npx -y @lism-css/mcp`で追加でき、CursorとVS Codeの設定例も公式にあります。設計ルールを伝えるスキルは`lism-css-guide`など3種類で、`npx skills add lism-css/core`で取得できます。[リポジトリ](https://github.com/lism-css/core)は`lism-css/lism-css`から`lism-css/core`へ名前が変わっているので、古い記事のコマンドは読み替えてください。

## 関連記事

- [CSSコンテナクエリ（@container）の使い方｜container-type・cqi単位・メディアクエリとの違い](/tech/details/4708/)
- [Tailwind CSS v3とv4の違い｜破壊的変更と移行手順をv4.3の実ビルドで検証【2026年11月】](/tech/details/5060/)
- [UnoCSSとは？アトミックCSSエンジンの設定と採用判断を実装目線で解説](/tech/details/16477/)
- [Panda CSSとは？型付きスタイル生成の設定と採用判断を実装目線で解説](/tech/details/16479/)
- [レスポンシブデザインの作り方｜メディアクエリとブレークポイント設計の実装手順](/tech/details/15329/)

---

出典: [Lism CSSとは？v1.1の使い方とクラス体系・Tailwindとの違い](<https://www.issoh.co.jp/tech/details/7298/>)（株式会社一創）