---
title: "概要"
description: "Lism CSS の概要と特徴について解説します。"
url: https://lism-css.com/docs/overview/
---
# 概要

“**Lism CSS**” は、**WEBサイトの骨組みをテンポ良く美しく作るための**軽量なCSS設計フレームワークです。

- サイト全体に自然と心地よいリズムを生み出すタイポグラフィ設計。
- ワイヤーフレーム作成が簡単にできるレイアウトファーストなプリミティブ設計。
- 柔軟でレスポンシブにも対応できるCSS変数を活かしたユーティリティ設計。

[Every Layout](https://every-layout.dev/) のレイアウトプリミティブやハーモニックモジュラースケーリング、[Tailwind CSS](https://tailwindcss.com/) のCSSプロパティ単位でのユーティリティファーストなアプローチから着想を得て、独自のCSS設計を組み立てました。

## Why Lism CSS?

- **自分でCSS設計を考えなくてよい。** — ベーススタイリング、`@layer` 階層、トークン、命名規則まで、サイト全体のCSS設計を丸ごと引き受けます。
- **CSSを読み込むだけで使える。** — ビルドや設定は不要です。軽量なスタイルシートを一つ読み込むだけですぐに導入できます。
- **React・Astroでは、より快適に。** — 専用コンポーネントを使えば、レスポンシブ対応やレイアウト構築をpropsで直感的に行えます。

> [!NOTE]
>
> 各特徴の詳細については「[特徴](https://lism-css.com/docs/features/)」ページで解説しています。

[Lism CSSの特徴](https://lism-css.com/docs/features)

## ゼロビルドでどんな環境でも使えます。

Lism CSS はあくまでも**CSSの設計理論が主体**になっており、それに沿って作成された**一つのCSSファイル**が本体です。

> [!TIP]
>
> CSSを読み込むだけで導入できるため、**素のHTMLサイトでも利用できる**ものになっています。

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

つまり、Lism CSSの導入に特殊なビルド処理は必須ではありません。

ただし、`lism-css`というnpmパッケージに内包されている React や Astro 向けの**専用コンポーネント**を使えば、さらに快適な開発体験が得られます。

また、SCSS設定の上書きや、`lism.config.js`の導入でより柔軟にカスタマイズして利用していただくことも可能です。

## Lism CSS のエコシステム

Lism CSS はコアのCSSライブラリだけでなく、開発をサポートするパッケージ群をOSSとして提供しています。

| パッケージ           | 説明                                 |
| --------------- | ---------------------------------- |
| `lism-css`      | コアCSS + React / Astro レイアウトコンポーネント |
| `@lism-css/ui`  | アコーディオンやタブ、ボタンリンクなどのUIコンポーネント集     |
| `lism-cli`      | UIコンポーネントをプロジェクトにコピーしてカスタマイズできるCLI |
| `@lism-css/mcp` | AIコーディングツール向けのMCPサーバー              |

すべて無料・オープンソース（MIT）で開発されています。

### JSXコンポーネントの使用例

Lism CSS を簡単に扱えるようにした専用のコンポーネントを React, Astro 形式で配布しています。

```jsx
<Center p="30" ar="3/2" bgc="base" g="10">
  <Heading level="1" fz={['3xl', '4xl']} ff="accent">
    Lism CSS
  </Heading>
  <Text c="text-2">The some description text is here...</Text>
  <Flex g="20" my-s="30">
    <Link href="###" d="inline-flex" bdrs="10" td="none" c="base" bgc="text" py="10" px="20">
      Documents
    </Link>
    <Link href="###" d="inline-flex" bdrs="10" td="none" c="text" bd py="10" px="20">
      Github
    </Link>
  </Flex>
</Center>
```

```html
<div class="l--center -p:30 -ar:3/2 -bgc:base -g:10">
  <h1 class="-fz:3xl -fz_sm -ff:accent" style="--fz_sm:var(--fz--4xl)">Lism CSS</h1>
  <p class="-c:text-2">The some description text is here…</p>
  <div class="l--flex -g:20 -my-s:30">
      <a class="-d:inline-flex -bdrs:10 -td:none -c:base -bgc:text -py:10 -px:20" href="###">Documents</a>
      <a class="-d:inline-flex -bdrs:10 -td:none -c:text -bd -py:10 -px:20" href="###">Github</a>
  </div>
</div>
```

---

## Inspirations

Lism CSS は以下のプロジェクトから多くのインスピレーションを受けています。

- [Every Layout](https://every-layout.dev/) — **レイアウトプリミティブ**と**ハーモニックモジュラースケーリング**の考え方を取り入れています。
- [Tailwind CSS](https://tailwindcss.com/) — 単一のCSSプロパティに対応するクラスを用意する設計を参考にしました。
- [Chakra UI](https://chakra-ui.com/), [MUI](https://mui.com/) — コンポーネントの使用感を参考にしました。