AIと一緒に始めるCSS。軽量フレームワーク「Lism CSS」を触ってみよう

みなさん、CSS 書いていますか？

「これからWeb制作を始めたい」「AIにコードを書いてもらえる時代だし、CSSも勉強してみたい」と思っている方も多いのではないでしょうか。
ただ、いざ始めてみようとすると 「Tailwind？素のCSS？フレームワークどれを選べばいいの？」 と迷ってしまった経験がある方もいると思います。

そこで今回は、2025年6月に v0 がリリースされ、最近じわじわと注目を集めている 軽量CSSフレームワーク「Lism CSS（リズム シーエスエス）」 を紹介したいと思います。

特にこの記事では、

• これからCSSを触ってみたい
• ChatGPTやClaudeなどのAIにコードを書いてもらいながら学びたい
• でも、AIが吐き出すCSSが「なんかぐちゃぐちゃで読みづらい…」と感じている

そんな方に向けて、「AI時代のCSS入門」としてのLism CSS という切り口で書いてみます。

Lism CSS とは？

Lism CSS は、SWELLというWordPressテーマの開発者である 了（@ddryo_loos）さん が制作した、日本発の軽量なCSSフレームワークです。

ざっくり特徴をまとめると以下のような感じになります。

• 📦 約30KB（gzip時 約8KB） の軽量設計
• 🚀 CDNから1行読み込むだけ で使える（ビルド不要）
• 🧱 レイアウトファースト な設計思想（Every Layoutインスパイア）
• 🎨 CSS変数（デザイントークン） によるテーマ管理
• 📱 コンテナクエリ ベースのモダンなレスポンシブ対応
• 🤖 AIコーディングとの相性を意識 した命名規則・MCPサーバー提供

「Tailwind CSSのように全部クラスで完結させる」のではなく、「CSSを書くべきところはちゃんと書く」という前提でつくられているのがポイントです。
このバランスが、CSSをこれから学ぶ人にとってちょうど良い導入になっています。

なぜ「AIと一緒にCSSを始める」のに向いているのか

最近はAIに「ボタンを作って」と頼めば、HTMLとCSSを一瞬で書いてくれます。便利な一方、こんな経験はないでしょうか？

• 同じ見た目のコンポーネントなのに、ページごとに違うクラス名でほぼ同じスタイルが書かれている
• レスポンシブ対応が場当たり的な @media まみれになる
• スタイリングに一貫性がなく、なぜその値を使っているか根拠がない

これは、AIに 「設計ルール」がない ために起こりがちな現象です。

Lism CSS は、

• クラスの命名規則
• レイアウトの組み立て方
• カラーや余白の値（デザイントークン）
• レイヤーによる詳細度管理

これらを 一通り「決めてくれている」 ので、AIにコードを書かせる際にも、Lism のルールに沿って書いてもらえばコードの一貫性を保ちやすくなります。
公式から MCPサーバー や llms.txt が提供されているのも、AI連携を重視している証拠です。

MCP（Model Context Protocol） とは、AIが外部のドキュメントやツールを参照するための仕組みのことです。Lism CSS は公式のMCPサーバーを提供しており、Claude Code・Cursor・GitHub Copilotなどから最新ドキュメントを参照しながらコードを書いてもらえます。

「AI任せだと不安だから、ある程度のルールは欲しい」という人にちょうどよく、また CSS初心者にとっても 「なんとなく書いていたCSSの設計感覚」が自然と身につく 教材になり得ます。

早速使ってみよう

Lism CSS の導入方法は大きく分けて 「CDNで読み込む方法」 と 「npmでインストールする方法」 の2つがあります。それぞれ順番に紹介します。

1. CDNで読み込む（一番手軽な方法）

最も簡単な始め方は、HTMLファイルに以下の1行を追加するだけです。

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

これでもう Lism CSS のクラスが使える状態になります。Node.jsもnpmもViteも不要です。
HTMLファイルを1つ作って、ブラウザで開くだけ で試せるので、CSS初心者の最初の一歩としてもハードルが低いですね。

執筆時点ではバージョンがまだ 0.x 系のため、本番運用する場合はバージョン固定（例： lism-css@0.0.13）での読み込みをおすすめします。

2. npmでインストールする（プロジェクトに組み込む場合）

ViteやNext.js、Astroなど、ビルドツールを使ったプロジェクトに組み込む場合は、npm経由でのインストールも可能です。

📦 インストール

npm install lism-css

📥 CSSの読み込み

プロジェクトのエントリーポイント（例： main.js / main.ts / index.css）でimportするだけです。

// main.js / main.ts などで
import 'lism-css/dist/css/main.css';

Next.js を使っている場合は、App Router であれば app/layout.tsx、Pages Router であれば pages/_app.tsx で読み込みます。

app/layout.tsx

// Next.js App Router
import 'lism-css/dist/css/main.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

🧩 React / Astro コンポーネントを使う

Lism CSS は、Reactコンポーネント・Astroコンポーネントも公式で用意されています。
クラス名を直接書く代わりに、 propsで指定する スタイルで書くことができます。

// React の場合
import { Box, Flex, Stack, Heading, Text } from 'lism-css/react';

export default function Hello() {
  return (
    <Stack g="20">
      <Heading tag="h2" fz="xl">Welcome</Heading>
      <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>
  );
}

これは、内部的には以下のようなクラス指定に変換されてレンダリングされます。

<div class="l--stack -g:20">
  <h2 class="-fz:xl">Welcome</h2>
  <div class="l--flex -g:20 -ai:center">
    <div class="-p:20 -bgc:base-2 -bdrs:20">
      <p class="-fz:l">Card A</p>
    </div>
    <div class="-p:20 -bgc:base-2 -bdrs:20">
      <p class="-fz:l">Card B</p>
    </div>
  </div>
</div>

クラス名のルールに慣れる前は、 propsで書ける React/Astro 版の方がとっつきやすい かもしれません。

Astroで利用する場合の注意点
.astro ファイルを node_modules から直接読み込めず、Directory import '...' is not supported resolving ES modules ... というエラーが出ることがあります。その場合は、astro.config.js の vite.ssr.noExternal に "lism-css" を追加してください。

// astro.config.js
import { defineConfig } from "astro/config";

export default defineConfig({
  vite: {
    ssr: {
      noExternal: ["lism-css"],
    },
  },
});

「とりあえず触ってみたい」なら CDN、「ちゃんとプロジェクトに組み込みたい・コンポーネントとして使いたい」なら npm という使い分けがおすすめです。

3. 最初のテンプレートをつくってみる

実際にちょっとしたカード風のレイアウトを書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Lism CSS Sample</title>
  <link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />
</head>
<body>
  <div class="l--stack -g:30 -p:40">
    <h1 class="-fz:xl -fw:bold">Hello, Lism CSS 👋</h1>
    <p>これは Lism CSS で書かれたサンプルです。</p>

    <div class="l--flex -g:20">
      <div class="-p:20 -bgc:base-2 -bdrs:10">カード A</div>
      <div class="-p:20 -bgc:base-2 -bdrs:10">カード B</div>
      <div class="-p:20 -bgc:base-2 -bdrs:10">カード C</div>
    </div>
  </div>
</body>
</html>

これだけで、見出し・段落・横並びの3カードレイアウトができあがります。
クラス名がちょっと暗号っぽく見えるかもしれませんが、ルールが分かれば直感的に読めるようになります。次の章で順番に見ていきましょう。

押さえておきたい基本クラス

Lism CSS のクラスは、大きく分けると次の2種類が中心になります。

種類	プレフィックス	役割	例
レイアウトプリミティブ	l--	「並び方」を決める骨組み	l--stack, l--flex, l--center
ユーティリティクラス	-プロパティ:値	単発のスタイル指定	-p:20, -fz:l, -bgc:base-2

これに加えて、状態を表す is--、機能付与の has--、コンポーネント用の c-- などもありますが、まずは上の2つだけ覚えればだいぶ書けるようになります。

🧱 レイアウトプリミティブ

「縦に並べたい」「横に並べたい」「中央に置きたい」など、よくあるレイアウトパターンを部品化したもの です。

l--stack ：縦に積み上げる

<div class="l--stack -g:20">
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

-g:20 で要素間のgap（余白）を指定しています。フォームの項目並び、カードの中身、セクション全体の骨組みなど、もっとも使う頻度が高いレイアウト です。

l--flex ：横並びレイアウト

<div class="l--flex -ai:c -jc:sb -g:20">
  <span>左</span>
  <span>右</span>
</div>

• -ai:c → align-items: center（縦中央揃え）
• -jc:sb → justify-content: space-between（両端揃え）
• -g:20 → gap

ヘッダーのロゴと右ナビ、ラベルとボタンなど、横方向に並べたい場面で便利です。

l--center ：縦横中央揃え

<section class="l--center" style="min-height: 100dvh;">
  <h1>ヒーローテキスト</h1>
</section>

ヒーローセクションのように 画面の中央にどん！と置きたい 時にぴったりです。

l--columns ：カラムレイアウト

<div class="l--columns -g:20" style="--cols: 3;">
  <div>カラム1</div>
  <div>カラム2</div>
  <div>カラム3</div>
</div>

--cols でカラム数を指定するだけで、シンプルにグリッドが組めます。

🎨 ユーティリティクラス

ユーティリティクラスは -プロパティ名:値 という記法で、CSSプロパティをそのまま短縮したような書き味になります。

クラス	CSS	意味
-p:20	padding: var(--s20)	余白（内側）
-mbs:50	margin-block-start: var(--s50)	上余白
-fz:l	font-size: var(--fz-l)	フォントサイズ
-fw:bold	font-weight: bold	フォント太さ
-c:main	color: var(--c-main)	文字色（メインカラー）
-bgc:base-2	background-color: var(--c-base-2)	背景色
-bdrs:10	border-radius: var(--s10)	角丸
-ai:c	align-items: center	flex/grid 縦揃え
-jc:sb	justify-content: space-between	flex/grid 横揃え

慣れるまでは「暗号っぽいな…」と感じるかもしれませんが、-プロパティ:値 というシンプルなルール なので、慣れてくると逆に読みやすくなります。

🎯 デザイントークンで配色・余白を一元管理

Lism CSS では --c-main --c-base --s20 --fz-l などの CSS変数（デザイントークン） が事前に用意されています。

:root {
  --c-main: #d97706;     /* メインカラーを上書き */
  --c-base: #fffaf0;     /* 背景色を上書き */
  --c-text: #1f2937;     /* 文字色を上書き */
}

このように :root で変数を上書きするだけで、サイト全体のテーマを変更できます。
「色や余白の値が散らばってメンテナンスがしにくい」というCSSあるあるの悩み を、最初から防いでくれる仕組みになっています。

AIとペアプロするときの書き方

Lism CSS のクラスは、AIに伝えやすい命名規則になっています。
たとえば、AIに以下のようにお願いしてみると、Lism CSS のルールに沿ったコードを返してくれやすくなります。

Lism CSS（lism-css.com）を使って、以下のヒーローセクションを作ってください。
- 画面中央にh1見出しと説明文、ボタンを縦に並べる
- 背景は --c-base、文字色は --c-text
- 余白は -p:40 を基本に、見出しは -fz:xl
- レイアウトは l--center を使ってください

すると、こんなコードが返ってくるイメージです。

<section class="l--center -bgc:base -c:text" style="min-height: 100dvh;">
  <div class="l--stack -g:30 -ai:c -p:40 -ta:c">
    <h1 class="-fz:xl -fw:bold">Welcome to Lism</h1>
    <p>軽量で気持ちいいCSSフレームワーク。</p>
    <a class="-d:if -px:40 -py:20 -bgc:main -c:base -bdrs:99 -td:n" href="#">
      Get Started
    </a>
  </div>
</section>

ポイントは、 「Lism CSSを使ってください」と最初に明示すること と、 「使ってほしいクラス名やトークン名」を具体的に指定すること です。
公式のドキュメントやllms.txtをAIに参照させると、さらに精度が上がります。

Cursor や Claude Code を使っている場合は、公式の Lism MCPサーバー を導入しておくと、AIが最新のクラス名やProps指定を自動的に参照しながらコードを生成してくれます。

Tailwind CSSと比較してみる

CSSフレームワークと言えば Tailwind を思い浮かべる方も多いと思います。両者の違いを簡単に整理してみます。

観点	Lism CSS	Tailwind CSS
設計思想	レイアウトファースト＋ユーティリティ	ユーティリティファースト
導入のしやすさ	CDN1行でOK（ビルド不要）	基本はビルド必須（CDN版もあり）
クラス名	-p:20, l--stack など短め	p-5, flex など短め
レスポンシブ	コンテナクエリ＋CSS変数	メディアクエリ＋ブレイクポイントprefix
学習コスト	中（独自設計の理解が必要）	低〜中（クラス数は多い）
カスタムCSS	書く前提の設計	できれば書かない方針
ファイルサイズ	約30KB	パージ後はかなり小さい
エコシステム	育成中	非常に大きい

ざっくり言うと、

• 「全部クラスで完結させたい！」 という方は Tailwind
• 「ある程度はCSSも書きたい・設計を意識したい」 という方は Lism

という選び方になりそうです。CSS初心者にとっては「素のCSSも自然と書く」前提のLismの方が、 CSSの基礎が身につきやすい という側面もあります。

ちょっと注意したいポイント

良いところばかり書いてしまいましたが、もちろん 使う前に知っておきたいポイント もあります。

✅ 学習コストはちょっとある

-p:20 のような短い記法、l--/is--/has--/c-- のプレフィックス、@layer の階層構造など、独自ルールが少しあります。
Tailwindに慣れている人ほど最初は戸惑う かもしれません。逆にCSSをほぼ初めて触る人は、まっさらな状態から学べるので、慣れるのは早いです。

✅ まだバージョンが0.x系

執筆時点では v0.0.13 前後で、まだ破壊的変更が入る可能性があります。
本番プロダクトで使う場合は バージョン固定＆ドキュメントの更新を定期的にチェック するのがおすすめです。

✅ 情報量はこれから

Tailwindに比べると、ネット上の情報や記事はまだ多くありません。
何か困ったときは、まずは公式ドキュメント、それからGitHubのリポジトリやDiscussionを確認するのがおすすめです。

まとめ

Lism CSSは、

• CDN1行ですぐ試せる軽量さ
• レイアウトを部品化したプリミティブ
• CSSを書く前提の設計思想
• AIコーディングを意識したエコシステム

を兼ね備えた、これからCSSを始める人にもおすすめできるCSSフレームワークです。

特に「AIにある程度コードを書いてもらいながら、自分でも少しずつCSSを学んでいきたい」という方にとっては、 「ルールが整っているから、AIが書いたコードも崩れにくい」 というのは大きな利点になります。
そして書いていく中で自然と、デザイントークン・レイヤー設計・レイアウトプリミティブといった、 モダンCSS設計の基礎 に触れることができるはずです。

「いきなり大きなフレームワークを学ぶのはちょっと…」「AIに任せきりだと不安…」という方は、まずは1つHTMLファイルを作って、CDNから読み込んでLism CSSを触ってみてはいかがでしょうか。

公式ドキュメントとPlaygroundのリンクを置いておきますので、気になった方はぜひ覗いてみてください。

公式サイト

公式ドキュメント

GitHub

開発者の方の解説記事