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

レベル: Webデザイン＆ツール タグ: , ,

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>

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

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

こんな人におすすめ！

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

今後の展望

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

まとめ

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

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

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

おすすめChromeプラグイン一覧

プラグイン名特徴
GoFullPageウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla色を抽出するための拡張機能です。
WhatFontウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixelデザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

模写の手順

ステップ内容
ステップ 1構図を手書きか全画面スクショ（Go full page等）した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2HTMLの基本構造を作成する
ステップ 3CSSでレイアウトを模写する
ステップ 4 中級〜JavaScriptを追加して動きを再現する
ステップ 5最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。

関連記事

jQueryで簡単に作成できるカレンダーデモアプリ｜メモ機能付き

jQueryで簡単に作成できるカレンダーデモアプリ｜メモ機能付き

最近、Webアプリケーションでカレンダーを使いたいシーンが増えてきました。例えば、スケジュール管理やイベントの追加、日付の確認など、ユーザーインターフェースにカレンダーを組み込む場面は多岐にわたります…

続きを読む →
Webアクセシビリティの基本｜ユーザー全員に配慮したウェブデザインの実践方法

Webアクセシビリティの基本｜ユーザー全員に配慮したウェブデザインの実践方法

Webアクセシビリティの基本 Webアクセシビリティとは、障害のあるユーザーを含むすべてのユーザーが、インターネット上で情報にアクセスでき、コンテンツを利用できるようにするための工夫や技術です。これを…

続きを読む →
Webパフォーマンス向上のための基本ガイド｜高速化のポイントと実践方法

Webパフォーマンス向上のための基本ガイド｜高速化のポイントと実践方法

Webサイトのパフォーマンスは、ユーザー体験を大きく左右する要素です。ページが遅いと、ユーザーはすぐに離脱してしまい、SEOランキングにも影響を与える可能性があります。このガイドでは、Webパフォーマ…

続きを読む →