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の成り立ちと設計の考え方

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

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

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

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

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

優先順位はカスケードレイヤーで管理します。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を読み込むだけで使えます。公式のインストール手順も版番号入りのURLを示しています。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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年版】で扱っています。

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の公式ドキュメントによると、検出できるのはビルド出力の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から増減はありませんでした。選択に迷いやすいものを並べます。

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

古い解説記事のクラス名には注意が必要です。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の計算値を取得しました。

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

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

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

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

旧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との違い

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

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

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

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では非推奨項目の互換維持方針が示されていますが、更新時には変更履歴と表示の確認が必要です。公開後の保守を少人数で回すサイトほど、ビルド環境を持たない構成の利点が出ます。企業サイト制作・コーポレートサイト制作で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で取得できます。リポジトリはlism-css/lism-cssからlism-css/coreへ名前が変わっているので、古い記事のコマンドは読み替えてください。

関連記事

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