LISM CSSとは？軽量フレームワークの特徴と使い方【2026年】

Web制作をしていて「CSSの設計が複雑になりがち」「フレームワークが重い」と感じたことはありませんか？そんな方におすすめなのが、注目の軽量CSSフレームワーク「lism-css」です。

公式：Lism CSS

lism-cssとは？

「lism-css」は、モダンな設計と軽量さを兼ね備えたユーティリティファースト型のCSSフレームワークです。

CDNで即導入可能
直感的なクラス名で学習コストが低い
HTMLに直接クラスを書くだけで柔軟なスタイルが適用可能
ReactやAstro対応のUIコンポーネントも開発中

開発者は @lism-ui/core などのnpmパッケージでも提供を行っており、今後の拡張性も期待されています。

lism-cssの主な特徴

1. 軽量で高速

CSSファイルは非常に小さく、CDNで即時使用が可能。初期設定不要でパフォーマンスも優秀です。

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

2. 意味のあるユーティリティクラス

例えば、-lh:1 や-p:30のような記法で簡潔にレイアウト指定が可能です。

  <div class="l--box -lh:1 -p:30 -bd">1</div>
  <div class="l--box -lh:1 -p:30 -bd">2</div>
  <div class="l--box -lh:1 -p:30 -bd">3</div>

3. ボタンなどのプリセットクラスも用意

 <div class="l--flex -jc:c -mbs:50">
    <a class="-hov:fade -d:if -c:base -bgc:text -px:40 -py:20 -td:n -bdrs:99" href="###">Link Button</a>
 </div>

4. レスポンシブ対応

<div class="-p:20 -p_sm -p_md -bd" style="--p_sm:var(--s30);--p_md:var(--s50)">
  <p>Example</p>
</div>

.-p{ padding: var(--p); }

/* @sm ~ */
@container (min-width: 480px) {
  .-p_sm{ padding: var(--p_sm); }
}

/* @md ~ */
@container (min-width: 720px) {
  .-p_md{ padding: var(--p_md); }
}

公式サイトでPlaygroundsを公開しています。

Vite + React, Astro, HTMX で Lism コンポーネントを試すことができる Playgroundsリポジトリを公開しています。

https://github.com/lism-css/lism-playgrounds

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lism with HTMX</title>
    <script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/lism-css@0.0.13/dist/css/main.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/lism-css@0.0.13/dist/scripts/accordion.js" type="module"></script>
  </head>
  <body>
    <div class="l--stack" style="min-height: 100dvh">
      <div hx-get="/header.html" hx-trigger="load" hx-swap="outerHTML"></div>
      <div class="is--container -container:m is--flow has--gutter -mbs:50">
        <p class="-fw:bold -fz:l">This site is a playground for testing lism-css.</p>
        <div class="l--flex -g:20 -g_sm -g_md -p:20 -p_sm -p_md -bd -bdc:divider" style="--g_sm: var(--s30); --g_md: var(--s40); --p_sm: var(--s30); --p_md: var(--s40)">
          <div class="l--box -lh:1 -p:30 -bd">1</div>
          <div class="l--box -lh:1 -p:30 -bd">2</div>
          <div class="l--box -lh:1 -p:30 -bd">3</div>
          <div class="l--box -lh:1 -p:30 -bd -mis:a">4</div>
        </div>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.</p>
        <div class="l--box is--flow is--fullwide has--gutter -bgc:base-2 -py:50 -my" style="--my: var(--s50)">
          <p class="-ta:c">Fullwide area</p>
          <div class="l--columns -g:40" style="--cols: 2">
            <div class="l--box -bgc:base -p:40 -bdrs:20 -bxsh:30">Columns</div>
            <div class="l--box -bgc:base -p:40 -bdrs:20 -bxsh:30">Columns</div>
          </div>
          <div class="l--flex -jc:c -mbs:50">
            <a class="-hov:fade -d:if -c:base -bgc:text -px:40 -py:20 -td:n -bdrs:99" href="###">Link Button</a>
          </div>
        </div>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.</p>
        <div class="l--stack -bd:b -my" style="max-width: var(--size-s); --my: var(--s50)">
          <details class="d--accordion -p:20 -bd:t">
            <summary class="d--accordion_header l--flex -ai:c -fw:bold">
              <span class="d--accordion_label -fx:1">Question 01 ?</span>
              <span class="d--accordion_icon -d:ig">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor" focusable="false" class="l--icon" aria-hidden="true">
                  <path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path>
                </svg>
              </span>
            </summary>
            <div class="d--accordion_body l--grid -mbs:20">
              <div class="d--accordion_inner -ov:h">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.</p>
              </div>
            </div>
          </details>
          <details class="d--accordion -p:20 -bd:t">
            <summary class="d--accordion_header l--flex -ai:c -fw:bold">
              <span class="d--accordion_label -fx:1">Question 02 ?</span>
              <span class="d--accordion_icon -d:ig">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor" focusable="false" class="l--icon" aria-hidden="true">
                  <path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path>
                </svg>
              </span>
            </summary>
            <div class="d--accordion_body l--grid -mbs:20">
              <div class="d--accordion_inner -ov:h">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.</p>
              </div>
            </div>
          </details>
          <details class="d--accordion -p:20 -bd:t">
            <summary class="d--accordion_header l--flex -ai:c -fw:bold">
              <span class="d--accordion_label -fx:1">Question 03 ?</span>
              <span class="d--accordion_icon -d:ig">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor" focusable="false" class="l--icon" aria-hidden="true">
                  <path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path>
                </svg>
              </span>
            </summary>
            <div class="d--accordion_body l--grid -mbs:20">
              <div class="d--accordion_inner -ov:h">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.</p>
              </div>
            </div>
          </details>
        </div>
      </div>
      <div hx-get="/footer.html" hx-trigger="load" hx-swap="outerHTML"></div>
    </div>
  </body>
</html>

模写上級 #007で使い方説明しています

他フレームワークとの比較

項目	lism-css	Tailwind CSS	Bootstrap
クラスの可読性	◎	◯	◎
カスタマイズ性	◎	◎	△
コンポーネントの豊富さ	△	△	◎
導入の手軽さ	◎	△（PostCSS等が必要）	◎
ファイルサイズ	◎	◯	△

こんな人におすすめ！

軽量かつ柔軟なフレームワークを探している人
Tailwindの記法が少し複雑に感じる人
HTMLだけでスピーディにUIを組みたい人
初心者〜中級者のCSS学習者

今後の展望

ReactやAstroとの連携コンポーネント（npmパッケージ）も開発中
カスタムデザインやプリセットUIの充実が期待される

まとめ

「lism-css」は、軽量でシンプル、それでいて柔軟性の高いCSSフレームワークです。 Tailwindのような細かいユーティリティ設計が苦手な人でも直感的に使えるため、今後のスタンダードのひとつとして注目されています。

ぜひあなたの次のプロジェクトに取り入れて、その軽さと使いやすさを体感してみてください！

よくある質問（FAQ）

Q. Lism CSSとは何ですか？

Lism CSS（リズムCSS）は2024年に登場した新しいCSSフレームワークで、セマンティックなHTML構造と軽量な設計が特徴です。Tailwind CSSのようなユーティリティ指向でありながら、HTMLの可読性を保つバランスの取れたアプローチを採用しています。

Q. Lism CSSとTailwind CSSの違いは？

Tailwind CSSはクラス名でほぼ全てのスタイルを制御しますが、HTMLが冗長になりがちです。Lism CSSはレイアウト構造に特化したクラスを提供し、デザイン詳細はCSS側で管理する方針のため、HTMLの可読性が高く保たれます。

Q. Lism CSSは実務で使えますか？

比較的新しいフレームワークのため、大規模な実績やエコシステムはまだ発展途上です。小〜中規模のプロジェクトやポートフォリオサイトでの採用に適しており、セマンティックなHTMLを重視するプロジェクトとの相性が良いです。

2026年 新CSSフレームワーク「lism-css」とは？軽量＆直感的な書き方が魅力！