はじめに・ステップ 7 / 7
用語集
このサイトに出てくる HTML・CSS・Lism の言葉を、分野ごとに1〜2文で説明し、くわしいページへ案内する用語集です。
このサイトに出てくる言葉を、分野ごとにまとめました。それぞれ1〜2文で説明し、くわしいページがあればリンクを付けています。
HTML と CSS の言葉#
| 言葉 | 意味 | くわしく |
|---|---|---|
| HTML | ページに何を載せるか（見出し・文章・画像など）を書く言葉 | HTML と CSS のきほん |
| CSS | 色・大きさ・余白・並べ方など、見た目を決める言葉 | HTML と CSS のきほん |
| 要素 | 開始タグから終了タグまでのひとかたまり（<p>…</p> など） |
HTML と CSS のきほん |
| タグ | <p> のように < と > で囲んだ印 |
HTML と CSS のきほん |
| 属性 | タグの中に 名前="値" の形で書く追加の情報 |
HTML と CSS のきほん |
| クラス（class） | 要素に付ける名前の札。Lism はこれで見た目を決める | HTML と CSS のきほん |
| 親要素・子要素 | ある要素を中に入れている外側が親、入っている内側が子 | HTML と CSS のきほん |
| セレクタ | CSS で、どの要素に当てるかを書く部分（.box など） |
HTML と CSS のきほん |
| プロパティ | 見た目のどの種類を変えるか（padding・color など） |
HTML と CSS のきほん |
| 値 | プロパティにどれだけ・どんなふうに、を入れるもの（16px・center など） |
HTML と CSS のきほん |
| CSS 変数 | -- で始まる名前を付けた値。var(--名前) で使い回せる。カスタムプロパティとも呼ぶ |
HTML と CSS のきほん |
| padding | 枠線の内側の余白 | 余白 |
| margin | 枠線の外側の余白 | 余白 |
| gap | 並べた子要素どうしのすきま | 余白 |
| Flexbox | 子要素を1つの向き（横か縦）に並べる CSS のしくみ | 並べ方（Flex・Grid・配置） |
| Grid | 子要素を縦と横のます目に並べる CSS のしくみ | 並べ方（Flex・Grid・配置） |
| 詳細度 | CSS が同じ要素に重なったとき、どれが勝つかを決める強さ | CSS のレイヤーと強さの順番 |
レイヤー（@layer） |
CSS をグループに分け、グループごとに強さの順番を決めるしくみ | CSS のレイヤーと強さの順番 |
Lism のクラスの種類#
| 言葉 | 意味 | くわしく |
|---|---|---|
| Primitive | 並べ方を組み立てる小さな積み木のクラス。l-- と a-- の2種類がある |
Primitive ってなに？ |
| Layout Primitive | 並べ方の土台になるクラス（l--stack・l--grid など） |
Primitive ってなに？ |
| Atomic Primitive | 並べ方のいちばん小さい部品のクラス（a--divider・a--icon など） |
Primitive ってなに？ |
| Trait Class | 要素に役割を名のらせる is-- と、働きを足す has-- のクラス |
Trait Class ってなに？ |
| Property Class | CSS のプロパティ1つと値を1つにしたクラス（-p:20 など） |
Property Class の書き方 |
| Set Class | HTML 要素の下地を整えたり、変数をまとめて入れたりするクラス（set--） |
Set Class |
| Utility Class | 役目のはっきりした飾りや効果のクラス（u--） |
Utility Class |
| Block | サイトで何度も使う部品に付ける、自分で作るクラス（b--） |
クラスの種類と見分け方 |
| Custom | 自由に作る自分用のクラス（c--） |
クラスの種類と見分け方 |
| プレフィックス | クラス名の頭に付く文字（l--・is-- など）。種類を表す |
名前のルール |
| camelCase | 2つめからの単語の頭を大文字にしてつなげる書き方（switchColumns） |
名前のルール |
値と見た目の言葉#
| 言葉 | 意味 | くわしく |
|---|---|---|
| トークン（デザイントークン） | 余白・文字の大きさ・色などに、あらかじめ決めてある段階の値。名前で呼んで使う | デザイントークン |
| 余白のトークン | --s10・--s20 などの余白の段階。-p:20 の 20 がこれ |
デザイントークン |
| ハーフレディング | 1行の高さのうち、文字の上と下にできるすきま（行間の半分ずつ）。Lism はこの量で行の高さを決める | 行の高さ（ハーフレディング） |
| キーカラー（keycolor） | --keycolor に入れた色。-c:keycolor などで、その色を使える |
色のトークン |
| ガター | 中身の左右に付ける、サイトで決まった量の余白。has--gutter で付ける |
has--gutter |
| コンテンツの幅（contentSize） | is--wrapper の中身が広がれる最大の幅。s・m・l・xl から選ぶ |
is--wrapper |
画面の幅の言葉#
| 言葉 | 意味 | くわしく |
|---|---|---|
| レスポンシブ | 見る画面の幅に合わせて、レイアウトや大きさを変えること | 画面の幅で切り替える |
| ブレイクポイント | レイアウトを切り替える幅の区切り。Lism では sm（480px）・md（800px）・lg（1120px）。xs・xl という名前も取ってあるが、ふだんは出力されず、使うにはカスタマイズが要る |
画面の幅で切り替える |
| モバイルファースト | せまい画面の見た目を先に決め、広くなったら変える考え方。Lism の sm は「480px 以上」で効く |
画面の幅で切り替える |
| メディアクエリ | 画面（ブラウザの窓）の幅を見て CSS を切り替えるしくみ | 画面の幅で切り替える |
| コンテナクエリ | 先祖にある基準の箱（コンテナ）の幅を見て CSS を切り替えるしくみ。Lism はふだんこちらを使う | 画面の幅で切り替える |
| コンテナ | コンテナクエリの基準になる箱。Lism では is--container を付けた要素 |
is--container |
道具とファイルの言葉#
| 言葉 | 意味 | くわしく |
|---|---|---|
| CDN | ファイルをネットから配ってくれるサービス。link 1行で Lism を読み込める | 読み込み方 |
| npm | JavaScript のパッケージ（プログラムのまとまり）を入れる道具 | 読み込み方 |
main.css |
Lism のふつうの CSS ファイル | CSS ファイルの種類 |
| CSS Purge | 使っていないクラスを取りのぞいて CSS を軽くする機能 | 使わない CSS を消す |
lism.config.js |
トークンや Props を足したり変えたりする設定ファイル | lism.config.js で設定する |
| コンポーネント | React・Astro で使う部品（<Stack> など） |
Lism コンポーネント |
| Props | コンポーネントに渡す指定（<Stack g="20"> の g など） |
Lism Props |
| MCP サーバー | AI のツールが Lism の情報を調べられるようにするしくみ | MCP サーバー |
次に読むページ#
「はじめに」はこれで終わりです。次は Lism の考え方を知るページへ進むか、気になるページを引いてください。
- Lism CSS の特長：Lism の考え方と、ほかのしくみとのちがい
- チートシート（よく使うクラス）：よく使うクラスの早見表
公式ドキュメント
2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。