Lism CSSとは？CSS設計理論の概要

2025年 6月 11日、Lism CSS という CSSフレームワークを ver.0.1 として β リリースしました。

https://www.lism-css.com/

この Lism CSS の設計について、その概要を解説していきたいと思います。
TailwindCSSがデファクトスタンダードとなっていますが、ぜひ新しい選択肢として検討いただけたら幸いです。

はじめに

WEBサイト制作において、CSS設計は永遠の課題ですよね。
モダンなCSSテクニックは日々たくさんSNSで流れてくるが、結局サイト全体を通してどのように設計するのが最適解なのかわからない。

情報を追いかけるのが大変で、どうしても従来通りのCSSの書き方でずっと制作してしまう。Tailwindも主流になってきているが、導入する方法を調べるのだけで億劫だ...。

そんな方にとって、「Lism CSS」は新しい解決策となるかもしれません。

導入方法

CDN 経由での利用

HTMLサイトに導入するには、以下のようにCSSファイルを読み込むだけとなります。

スタイルシートをCDNから読み込む

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

※: アコーディオンやタブは、別途追加でscriptの読み込みが必要です。（CDNで配布してるので、そちらも別途読み込むだけです）

npm パッケージとしての利用

、React、Astro、Next.js などのモダンな開発環境では、lism-cssパッケージの導入が便利です。

専用のコンポーネントを使ってより快適に開発できるようになっています。

パッケージのインストール

npm install lism-css

プロジェクトにて

// CSSをグローバルにインポート
import "lism-css/main.css";

// 必要なファイルでコンポーネントをインポート
import { Box, Stack, Flex, Grid, ... } from "lism-css/react";

Lism CSS の特徴

独自のCSS設計理論をreset.cssレベルから構築しており、デザイントークン・レイアウトモジュール・ユーティリティクラスを組み合わせてWEBサイト全体を支える骨組みとして機能します。

Lismの主軸はあくまで設計理論のため、Lism CSS は、ビルド処理や設定が不要でも使えるようになっています。 CSSファイルを読み込むだけでも利用できるため、素の HTML サイトでも利用できます。

さらに、lism-cssパッケージではReactコンポーネント/Astroコンポーネントも配布しています。
Lism のCSS設計を手軽に導入できるようになっているので、ぜひそちらも活用いただけたらと思います。

1. レイヤー階層による明確な CSS 設計

Lism CSS では、CSS の階層構造を明確に定義することで、詳細度の複雑化を防いでいます。

レイヤー	役割	@layer
Reset	reset CSS	@lism-reset
Base	トークン定義や変数セット、HTML要素の初期スタイルをセットするレイヤー。	@lism.base
Modules	モジュール群を定義するレイヤー。この中でさらにレイヤーが分かれている。	@lism.modules
Utility Class	その他、機能やスタイルが明確なユーティリティクラスを定義するレイヤー。	@lism.utility
Props Class	単一 CSS プロパティに紐づくクラスをレイヤー外で定義します。	-

この階層構造により、CSS 設計の見通しが良くなり、長期的なメンテナンスが容易になります。

2. レイアウトファースト + ユーティリティクラス

Lism CSS は「レイアウトファースト」な設計思想を採用しています。基本的なレイアウトはモジュールクラスで組み、装飾的な部分はユーティリティクラスで補完します。

<!-- レイアウトモジュール + ユーティリティクラス -->
<div class="l--stack -g:20 -p:30 -bgc:base-2">
  <h2>見出し</h2>
  <p>コンテンツ...</p>
</div>

3. デザイントークンによる一貫性

カラー、スペース、タイポグラフィ、シャドウなど、主要なプロパティに対して段階的・またはセマンティックなプリセット値を CSS 変数として定義しています。

/* スペーストークン（フィボナッチ数列ベース） */
--s10: 0.375rem;
--s20: 0.625rem;
--s30: 1rem;
--s40: 1.625rem;
--s50: 2.625rem;
...

/* カラートークン */
--c--base: #ffffff;
--c--text: #333333;
--c--main: #0066cc;

/* 倍音列に基づくフォントサイズ */
--fz--5xl: #{fz-calc(6)}em;
--fz--4xl: #{fz-calc(5)}em;
--fz--3xl: #{fz-calc(4)}em;
--fz--2xl: #{fz-calc(3)}em;
--fz--xl: #{fz-calc(2)}em;
--fz--l: #{fz-calc(1)}em;
--fz--m: 1em;
--fz--s: #{fz-calc(-1)}em;
--fz--xs: #{fz-calc(-2)}em;
--fz--2xs: #{fz-calc(-3)}em;

これらのトークンを活用することで、サイト全体のデザインに一貫性が生まれ、後からの調整も容易になります。

トークン一覧ページはこちら

4. CSSプロパティごとのユーティリティクラス

Tailwindcss のように、特定のCSSプロパティとその値の組み合わせについて、主要なものを-{prop}:{value}という形式で定義しています。
Lism では、これらを Propクラスと読んでいます。(Utility クラスはまた別であります。)

例

.-p\:10 { padding: var(--s10) }
.-px\:20 { padding-inline: var(--s20) }
.-fz\:l { font-size: var(--fz-l) }
.-bxsh\:20 { box-shadow: var(--bsxh-20) }
.-d\:none { display: none }
.-ta\:center { text-align: center }

Propクラス一覧はこちら

5. 独自のレスポンシブ対応

Lism CSS の最も特徴的な機能の一つが、CSS 変数とクラスを組み合わせたレスポンシブ対応です。

先ほど紹介した Propクラス の派生クラスとして、-{prop}_{bp}という形式のレスポンシブ対応用のクラスを定義しています。

例

.-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); }
}

（全てのCSSプロパティに対して用意されているわけではありませんが、SCSSで読み込む場合はカスタマイズで増やすことも可能）

例えば、padding を 20 → 30 → 50 と切り替えるには次のようにします。

html

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

上記は専用コンポーネントを使えば、より簡潔に記述できます：

jsx

<Lism p={[20, 30, 50]} bd>
  <p>Example</p>
</Lism>

コンテナクエリの採用

Lism CSS では、コンテナクエリをデフォルトで採用しています。これにより、親要素のサイズに応じた柔軟なレスポンシブデザインが可能になります。

また、ブレイクポイントは、特定のデバイスサイズに依存しない 240px 刻みで設定されています：

• sm: width >= 480px
• md: width >= 720px
• lg: width >= 960px（オプション）
• xl: width >= 1200px（オプション）

コンテナクエリでは、レスポンシブに値を切り替えるには先祖要素でコンテナ定義をしておく必要があることに注意してください。
Lismでは、親要素などでis--containerクラスを活用すると便利です。

主要なレイアウトコンポーネントの例

主要なレイアウトモジュールを、いくつか紹介します。

Flex (l--flex)

Flexboxで横並びレイアウトを実現します。

jsx

<Flex fxw='wrap' jc='center' g='20'>
  <div>Flex Content</div>
  <div>Flex Content</div>
  <div>Flex Content</div>
</Flex>

↓出力

html

<div class="l--flex -g:30 -jc:center">
  <div>Flex Content</div>
  <div>Flex Content</div>
  <div>Flex Content</div>
</div>

Grid (l--grid)

Grid レイアウトを組み立てるコンポーネントです。

jsx

<Grid gtc={['1fr 1fr', '1fr 2fr']}>
  <Box p='30' bgc='blue:20%'>A</Box>
  <Box p='30' bgc='purple:10%'>B</Box>
</Grid>

↓出力

html

<div class="l--grid -gtc_sm" style="--gtc:1fr 1fr;--gtc_sm:1fr 2fr">
  <div class="l--box -p:30 -bgc:mix" style="--_bgc1:var(--blue);--_mixpct-bgc:20%">A</div>
  <div class="l--box -p:30 -bgc:mix" style="--_bgc1:var(--purple);--_mixpct-bgc:10%">B</div>
</div>

Center (l--center)

内部の要素を上下左右中央揃えで配置するためのコンポーネントです。

jsx

<Center g='10' ar='3/2' lh='xs'>
  <Text fz='l'>TEXT</Text>
  <Text fz='s'>Lorem ipsum dolor sit amet.</Text>
</Center>

↓出力

html

<div class="l--center -g:10 -ar:3/2 -lh:xs">
  <p class="-fz:l">TEXT</p>
  <p class="-fz:s">ロレムイプサムの座り雨。</p>
</div>

Columns (l--columns)

指定した列数でカラムレイアウトを作成できるコンポーネントです。

jsx

<Columns cols={[1, 2, 3]} g='30'>
  <Lism bgc='base-2' p='30'>Box1</Lism>
  <Lism bgc='base-2' p='30'>Box2</Lism>
  <Lism bgc='base-2' p='30'>Box3</Lism>
  <Lism bgc='base-2' p='30'>Box4</Lism>
  <Lism bgc='base-2' p='30'>Box5</Lism>
  <Lism bgc='base-2' p='30'>Box6</Lism>
</Columns>

html

<div class="l--columns -g:30" style="--cols:1;--cols_sm:2;--cols_md:3">
  <div class="-bgc:base-2 -p:30">Box1</div>
  <div class="-bgc:base-2 -p:30">Box2</div>
  <div class="-bgc:base-2 -p:30">Box3</div>
  <div class="-bgc:base-2 -p:30">Box4</div>
  <div class="-bgc:base-2 -p:30">Box5</div>
  <div class="-bgc:base-2 -p:30">Box6</div>
</div>

WithSide (l--withSide)

メディアクエリやコンテナクエリに依存せず、維持したいコンテンツの長さを基準にして横並びと縦並びの切り替えを行うことができる2カラムレイアウトを作成できます。

jsx

<WithSide sideW='12rem' mainW='20rem' g='30'>
  <Box p='20' bd bdc='blue'>
    <p>Main Content</p>
    <Dummy />
  </Box>
  <Box data-is-side p='20' bd bdc='red'>
    <p>Side Content</p>
  </Box>
</WithSide>

↓出力

html

<div class='l--withSide -g:30' style='--sideW:12rem;--mainW:20rem'>
  <div class='l--box -p:20 -bd' style='--bdc:var(--blue)'>
    <p>Main Content</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.</p>
  </div>
  <div class='l--box is--side -p:20 -bd' style='--bdc:var(--red)'>
    <p>Side Content</p>
  </div>
</div>

Utility クラスの例

レイアウトというよりデザイン的な装飾を担う機能は、u--ではじまるユーティリティクラスを定義して利用ます。

Utilityクラス一覧はこちら

u-cbox

--keycolorで指定したキーカラーをベースに、ボックスをカラーリングするユーティリティクラスです。

jsx

<Lism className='u-cbox' keycolor='blue' p='30'>...</Lism>
<Lism className='u-cbox' keycolor='red' bd p='30'>...</Lism>
<Lism className='u-cbox' keycolor='purple' bd bdc='keycolor:base:25%' p='30'>...</Lism>
<Lism className='u-cbox' keycolor='#688f04' bd-x-s bdw='4px' p='30'>...</Lism>

↓出力

html

<div class='u-cbox -p:30' style='--keycolor:var(--blue)'>...</div>
<div class='u-cbox -bd -p:30' style='--keycolor:var(--red)'>...</div>
<div class="u-cbox -bd -p:30" style="--keycolor:var(--purple);--bdc:color-mix(in srgb, var(--keycolor) 25%, var(--c--base))">...</div>
<div class='u-cbox -bd-x-s -p:30' style='--keycolor:#688f04;--bdw:4px;'>...</div>

足りない部分は自分で書く

lism-cssで配布しているCSSに内包されているクラスは、容量が大きくなりすぎないように、主要なプロパティとその値の組み合わせを厳選しています。

Lismの設計に則り、足りないクラスは適宜追加してご利用ください。

コンポーネントの設計例もいくつか公式ドキュメントに載せていますので、コピペしてカスタマイズしてみてください。

まとめ

Lism CSS は、モダンな CSS 機能（@layer、コンテナクエリ、CSS 変数、color-mix()など）を積極的に活用しながら、シンプルで使いやすいフレームワークとして設計されています。

• 軽量：必要最小限の CSS で、約30KBから利用可能。
• 保守性：明確な階層構造とデザイントークンにより、メンテナンスコストを削減。
• 柔軟：ビルド不要で、あらゆる環境で使用可能。レイアウトモジュールとユーティリティクラスの組み合わせで自由度の高いデザインが可能。

WEBサイト制作の効率化と品質向上を求めるコーダーにとって、Lism CSS は強力なサポーターとなります。

少しクセが強く学習コストも高めですが、慣れてくればとても直感的に使用できるようになります。
1ミリでも気になった方は、ぜひ一度、詳細な公式ドキュメントをご覧ください。

---

リポジトリ: https://github.com/lism-css/lism-css
ライセンス: MIT

Githubでスターをポチッと押していただけるだけでも励みになります！

使ってみて何かご意見ご感想等ありましたら、ここのコメント欄か、もしくはDiscordサーバーに参加して投げていただけますと非常に嬉しいです。