Lism Tips

はじめに・ステップ 4 / 7

はじめてのページを作る

Lism のクラスを少しずつ足しながら、見出し・文章・タグ・カードの並ぶ小さなページを組み立てる手順を説明します。

このページでは、Lism のクラスを1つずつ足しながら、小さなページを作ります。各段の表示例を見比べると、クラスを足すたびに何が変わるかが分かります。Lism の CSS は、読み込み方（インストール） のとおりに読み込んである前提です。

0. クラスを何も付けない#

まずは、ふつうの HTML だけを書きます。見出し・文章・タグの並び・カードが、すきまなく縦に詰まっています。

表示例

わたしの本だな

好きな本を3冊しょうかいします。

小説 図鑑 まんが
1冊め
2冊め
3冊め
html
<div>
  <h2>わたしの本だな</h2>
  <p>好きな本を3冊しょうかいします。</p>
  <div>
    <span>小説</span>
    <span>図鑑</span>
    <span>まんが</span>
  </div>
  <div>
    <div>1冊め</div>
    <div>2冊め</div>
    <div>3冊め</div>
  </div>
</div>

1. 中身の幅と左右の余白をそろえる#

いちばん外側の箱に、次のクラスを付けます。

クラス していること
is--wrapper 直下の子要素の幅を、決まった最大の幅までにそろえ、真ん中に置く
style="--contentSize: 20rem" その最大の幅を 20rem（約 320px）にする
has--gutter 左右に決まった余白（ガター）を付ける
-py:40 上下に約 40px の余白を付ける（py は padding-block の略）

表示例

わたしの本だな

好きな本を3冊しょうかいします。

小説 図鑑 まんが
1冊め
2冊め
3冊め
html
<div class="is--wrapper has--gutter -py:40 -bd" style="--contentSize: 20rem">
  <h2>わたしの本だな</h2>
  <p>好きな本を3冊しょうかいします。</p>
  <div>
    <span>小説</span>
    <span>図鑑</span>
    <span>まんが</span>
  </div>
  <div>
    <div>1冊め</div>
    <div>2冊め</div>
    <div>3冊め</div>
  </div>
</div>

中身が 20rem より広がらず、箱の真ん中に寄りました。is--wrapper の最大の幅は、何も指定しなければ m（880px）です。決まった段階なら -contentSize:s のように s（640px）・m・l・xl から選べ、それ以外の幅は CSS 変数 --contentSize で渡します。寄り方が見えるように小さい幅にし、枠が分かるように -bd（枠線）も付けています。

補足

本物のページでは、is--wrapper は <main> などページ全体を包む要素に付けます。広い画面では中身が真ん中に寄り、両側があきます。

くわしくは is--wrapper（中身の幅をそろえる） と has--gutter（左右に余白を付ける） を見てください。

2. 縦に並べて、すきまをそろえる#

外側の箱に l--stack と -g:30 を足します。l--stack は中の要素を縦に並べ、-g:30 はそのすきまを約 24px にします（g は gap の略）。

表示例

わたしの本だな

好きな本を3冊しょうかいします。

小説 図鑑 まんが
1冊め
2冊め
3冊め
html
<div class="is--wrapper has--gutter -py:40 -bd l--stack -g:30" style="--contentSize: 20rem">
  <h2>わたしの本だな</h2>
  <p>好きな本を3冊しょうかいします。</p>
  <div>
    <span>小説</span>
    <span>図鑑</span>
    <span>まんが</span>
  </div>
  <div>
    <div>1冊め</div>
    <div>2冊め</div>
    <div>3冊め</div>
  </div>
</div>

見出しと文章とタグとカードのあいだに、同じすきまが空きました。くわしくは l--stack（縦に並べる） を見てください。

3. タグを横に並べる#

タグの箱に l--cluster と -g:10 を付けます。l--cluster は中の要素を横に並べ、入りきらなければ次の行へ折り返します。それぞれのタグには、枠線（-bd）・角丸（-bdrs:99）・左右の余白（-px:15）を付けます。

表示例

わたしの本だな

好きな本を3冊しょうかいします。

小説 図鑑 まんが
1冊め
2冊め
3冊め
html
<div class="is--wrapper has--gutter -py:40 -bd l--stack -g:30" style="--contentSize: 20rem">
  <h2>わたしの本だな</h2>
  <p>好きな本を3冊しょうかいします。</p>
  <div class="l--cluster -g:10">
    <span class="-bd -bdrs:99 -px:15">小説</span>
    <span class="-bd -bdrs:99 -px:15">図鑑</span>
    <span class="-bd -bdrs:99 -px:15">まんが</span>
  </div>
  <div>
    <div>1冊め</div>
    <div>2冊め</div>
    <div>3冊め</div>
  </div>
</div>

-bdrs:99 は角をいちばん大きく丸め、両はしが丸い形になります（bdrs は border-radius の略）。くわしくは l--cluster（横に並べて折り返す） を見てください。

4. カードを同じ幅の列に分ける#

カードの箱に l--columns を付けます。列の数は CSS 変数 --cols で決めます。ここでは、せまい幅では1列、480px 以上では3列にします。

書くもの していること
l--columns 中の要素を同じ幅の列に並べる
style="--cols: 1" ふだんは1列
-cols_sm と --cols_sm: 3 幅が 480px 以上のときは3列
-g:20 列どうしのすきまを約 16px

カード1枚1枚には、内側の余白（-p:20）と、うすい背景色（-bgc:base-2）を付けます。

表示例

わたしの本だな

好きな本を3冊しょうかいします。

小説 図鑑 まんが
1冊め
2冊め
3冊め
html
<div class="is--wrapper has--gutter -py:40 -bd l--stack -g:30" style="--contentSize: 20rem">
  <h2>わたしの本だな</h2>
  <p>好きな本を3冊しょうかいします。</p>
  <div class="l--cluster -g:10">
    <span class="-bd -bdrs:99 -px:15">小説</span>
    <span class="-bd -bdrs:99 -px:15">図鑑</span>
    <span class="-bd -bdrs:99 -px:15">まんが</span>
  </div>
  <div class="l--columns -cols_sm -g:20" style="--cols: 1; --cols_sm: 3">
    <div class="-p:20 -bgc:base-2">1冊め</div>
    <div class="-p:20 -bgc:base-2">2冊め</div>
    <div class="-p:20 -bgc:base-2">3冊め</div>
  </div>
</div>

スマートフォンではカードが縦に1列、広い画面では横に3列で並びます。

注意

-cols_sm のような幅で切り替えるクラスは、見ているのは画面の幅ではなく、先祖にある is--container の箱の幅です（コンテナクエリ）。ページのどこかの先祖に is--container を付けておかないと切り替わりません。くわしくは 画面の幅で切り替える（レスポンシブ） を見てください。

くわしくは l--columns（同じ幅の列に分ける） を見てください。

5. 文字と色を整える#

最後に、見出しと文章の見た目を整えます。

クラス していること
-fz:2xl 文字を大きくする（fz は font-size の略）
-c:text-2 文字をうすめの色にする（c は color の略）
-bdrs:20 角を少し丸める
-bxsh:20 影を付ける（bxsh は box-shadow の略）

表示例

わたしの本だな

好きな本を3冊しょうかいします。

小説 図鑑 まんが
1冊め
2冊め
3冊め
html
<div class="is--wrapper has--gutter -py:40 -bd l--stack -g:30" style="--contentSize: 20rem">
  <h2 class="-fz:2xl">わたしの本だな</h2>
  <p class="-c:text-2">好きな本を3冊しょうかいします。</p>
  <div class="l--cluster -g:10">
    <span class="-bd -bdrs:99 -px:15">小説</span>
    <span class="-bd -bdrs:99 -px:15">図鑑</span>
    <span class="-bd -bdrs:99 -px:15">まんが</span>
  </div>
  <div class="l--columns -cols_sm -g:20" style="--cols: 1; --cols_sm: 3">
    <div class="-p:20 -bgc:base-2 -bdrs:20 -bxsh:20">1冊め</div>
    <div class="-p:20 -bgc:base-2 -bdrs:20 -bxsh:20">2冊め</div>
    <div class="-p:20 -bgc:base-2 -bdrs:20 -bxsh:20">3冊め</div>
  </div>
</div>

これで完成です。CSS を1行も書かずに、クラスの組み合わせだけでここまで作れました。

使ったクラスのまとめ#

種類 使ったクラス くわしいページ
幅と余白の土台 is--wrapper・--contentSize・has--gutter Trait Class ってなに？
並べ方 l--stack・l--cluster・l--columns Primitive ってなに？
余白 -p:20・-px:15・-py:40・-g:10 など 余白（padding・margin・gap）
文字と色 -fz:2xl・-c:text-2・-bgc:base-2 文字の色と背景
枠線・角丸・影 -bd・-bdrs:20・-bxsh:20 枠線・角丸・影（-bd など）

次に読むページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧