Lism CSS ってなに？

Lism CSS（リズム シーエスエス）は、Web ページの見た目を整えるための道具です。HTML に決まった名前のクラスを書くだけで、余白・並べ方・文字の大きさ・色などが付きます。このページでは、Lism CSS がどんなものかと、このサイトの読み進め方を説明します。

Web ページは HTML と CSS でできている#

Web ページは、おもに2つのファイルでできています。

• HTML：ページに何を載せるか（見出し・文章・画像・ボタンなど）を書くもの
• CSS：それをどう見せるか（色・大きさ・余白・並べ方など）を書くもの

CSS は自分で1行ずつ書くこともできます。ただ、ページが増えるほど「余白は何 px にするか」「この名前のクラスは何をするか」を考えるのが大変になります。Lism CSS は、その決めごとを最初からまとめて用意してくれる「CSS の部品セット」です。

HTML と CSS がはじめての人は、先に HTML と CSS のきほん を読んでください。

Lism CSS でできること#

たとえば次の HTML は、Lism のクラスだけで書いています。自分で CSS を1行も書かずに、内側の余白・背景の色・枠線・縦の並びが付きます。

<div class="l--stack -g:20 -p:30 -bgc:base-2 -bd -bdrs:20">
  <p class="-fz:xl -fw:bold">はじめての Lism</p>
  <p>クラスを書くだけで、見た目が整います。</p>
</div>

何がうれしいのか#

CSS の決めごとを自分で考えなくてよい#

余白や文字の大きさの段階、クラスの名前の付け方、CSS どうしの強さの順番（CSS のレイヤー）まで、Lism がまとめて決めています。自分で一から設計しなくても、決まった形に沿って書けば整ったページになります。

ファイルを1つ読み込むだけで使える#

特別な準備（ビルドと呼ばれる変換の作業）は要りません。HTML に <link> の1行を足すだけで、ふつうの HTML のサイトでも使えます。React や Astro（Web ページを作るための仕組み）で使うための専用の部品も用意されています。くわしくは 読み込み方（インストール） で説明します。

余白や文字に自然なリズムが出る#

余白や文字の大きさは、決まった段階の値（デザイントークン）から選びます。同じ段階の値を使い回すので、ページ全体の間隔がそろい、見た目にまとまりが出ます。

よくある並べ方が部品になっている#

「縦に並べる」「横に並べて折り返す」「同じ幅の列に分ける」のような、よく使う並べ方がクラスになっています。これを Lism では Primitive（プリミティブ。組み立ての土台になる小さな部品）と呼びます。くわしくは Primitive ってなに？ で説明します。

画面の幅に合わせて切り替えられる#

スマートフォンと広い画面で、余白や列の数を変えることもできます（レスポンシブ）。中には、置かれた場所の幅を見て、自分で横並びと縦並びを切り替えてくれる部品もあります。

幅で切り替えるクラス（-p_sm など）は、画面ではなく先祖の箱の幅を見ます（コンテナクエリ）。そのため、先祖に is--container（幅の基準になる箱） を付けておく必要があります。

Lism の仲間のパッケージ#

Lism は、いくつかのパッケージ（npm で配られるプログラムのまとまり）に分かれています。どれも無料で、MIT ライセンスのオープンソースです。

このサイトの読み方#

このサイト「Lism Tips」は、Lism CSS の使い方を日本語でやさしく説明する、非公式のリファレンスです。はじめての人は「はじめに」の7ページを上から順に読み、そのあとは辞書のように必要なページを引いてください。

言葉の意味が分からなくなったら、用語集 を開いてください。よく使うクラスは チートシート に一覧にしています。

次に読むページ#

• HTML と CSS のきほん：Lism を使う前に知っておきたい HTML と CSS の言葉