Lism Tips

基本のコンポーネント（Group・Text など）

Group・Text・Heading・Inline・Link・List・ListItem・Media は、決まったタグを出す Lism の基本のコンポーネントです。出すタグと使い方をまとめます。

Lism には、よく使う HTML のタグを出すための、基本のコンポーネントがあります。<Media> 以外は、<Lism> に as でタグを決めたものと同じで、Lism Props が全部使えます。名前でタグの役目が分かるので、コードが読みやすくなります。

一覧#

コンポーネント 出すタグ as で変えられるタグ
<Group> div section・article・figure・nav・aside・header・footer・main・fieldset・hgroup
<Text> p div・blockquote・address・figcaption・pre
<Heading> h2（level で h1〜h6） —
<Inline> span em・strong・small・code・time・i・b・mark・abbr・cite・kbd・label
<Link> a —
<List> ul ol・dl
<ListItem> li dt・dd
<Media> img（Astro 版は Astro の <Image>） picture・video・iframe など

読み込み方#

React では lism-css/react、Astro では lism-css/astro から読み込みます。

jsx
import { Group, Text, Heading, Inline, Link, List, ListItem, Media } from 'lism-css/react';
jsx
import { Group, Text, Heading, Inline, Link, List, ListItem, Media } from 'lism-css/astro';

Group（まとめる箱）#

<Group> は <div> を出します。要素をひとまとめにする箱です。中身は <Lism as="div"> と同じです。

補足

<Lism> も何も書かなければ <div> になります。<Group> を使うと、「ここは要素をまとめる箱です」という気持ちがコードから伝わります。

jsx
<Group p="20" bgc="base-2" bdrs="20">
  Lorem ipsum text...
</Group>
// → <div class="-p:20 -bgc:base-2 -bdrs:20">Lorem ipsum text...</div>

表示例

まとめた箱
html
<div class="-p:20 -bgc:base-2 -bdrs:20">まとめた箱</div>

Text（文章）#

<Text> は <p> を出します。<Lism as="p"> と同じです。

jsx
<Text>Lorem ipsum text...</Text>
// → <p>Lorem ipsum text...</p>

<Text fz="l" hl="s" c="text-2">
  Lorem ipsum text...
</Text>
// → <p class="-fz:l -hl:s -c:text-2">Lorem ipsum text...</p>

表示例

少し大きく、うすい色の文章です。

html
<p class="-fz:l -hl:s -c:text-2">少し大きく、うすい色の文章です。</p>

Heading（見出し）#

<Heading> は <h1>〜<h6> の見出しを出します。<Lism as="h{level}"> と同じです。

Props 値 最初の値 意味
level "1"〜"6" "2" 見出しの段（何番の h にするか）
jsx
<Heading level="2">見出しテキスト</Heading>
// → <h2>見出しテキスト</h2>

<Heading level="3">Heading Level 3</Heading>
// → <h3>Heading Level 3</h3>

表示例

h2 の見出し

h3 の見出し

h4 の見出し

html
<div class="l--stack -g:10">
  <h2>h2 の見出し</h2>
  <h3>h3 の見出し</h3>
  <h4>h4 の見出し</h4>
</div>

Inline（文の一部）#

<Inline> は <span> を出します。文の中の一部だけに見た目を付けたいときに使います。<Lism as="span"> と同じです。

jsx
<Text>
  これは
  <Inline as="strong" c="red">
    強調された
  </Inline>
  テキストです。
</Text>
// → <p>これは<strong class="-c" style="--c: var(--red)">強調された</strong>テキストです。</p>

表示例

これは強調されたテキストです。

html
<p class="-fz:l">これは<strong class="-c -fw:700" style="--c: var(--red)">強調された</strong>テキストです。</p>

Link（リンク）#

<Link> は <a> を出します。<Lism as="a"> と同じです。

jsx
<Link href="###">リンクテキスト</Link>
// → <a href="###">リンクテキスト</a>

<Link href="###" c="purple" fz="l" fw="700">
  スタイル付きリンク
</Link>
// → <a href="###" class="-c -fz:l -fw:700" style="--c: var(--purple)">スタイル付きリンク</a>

表示例

スタイル付きリンク
html
<a href="#" class="-c -fz:l -fw:700" style="--c: var(--purple)">スタイル付きリンク</a>

List と ListItem（箇条書き）#

<List> は <ul>、<ListItem> は <li> を出します。それぞれ <Lism as="ul">・<Lism as="li"> と同じです。

jsx
<List>
  <ListItem>リストアイテム 1</ListItem>
  <ListItem>リストアイテム 2</ListItem>
</List>
// → <ul><li>リストアイテム 1</li><li>リストアイテム 2</li></ul>

番号付きの箇条書き#

<List as="ol"> にすると、<ol>（番号の付いた箇条書き）になります。

表示例

  1. 1つめ
  2. 2つめ
  3. 3つめ
html
<ol>
  <li>1つめ</li>
  <li>2つめ</li>
  <li>3つめ</li>
</ol>

用語と説明の一覧#

<List as="dl"> に、<ListItem as="dt">（用語）と <ListItem as="dd">（説明）を入れると、定義リスト（用語と説明の組の一覧）になります。

jsx
<List as="dl">
  <ListItem as="dt" fw="bold">用語 1</ListItem>
  <ListItem as="dd">用語 1 の説明文です。</ListItem>
</List>

表示例

用語 1
用語 1 の説明文です。
用語 2
用語 2 の説明文です。
html
<dl>
  <dt class="-fw:bold">用語 1</dt>
  <dd>用語 1 の説明文です。</dd>
  <dt class="-fw:bold">用語 2</dt>
  <dd>用語 2 の説明文です。</dd>
</dl>

Media（画像・動画）#

<Media> は、画像や動画を出します。React 版はふつうの <img> を、Astro 版は Astro の <Image> を使います。

jsx
<Media src="/img/photo.webp" width="960" height="640" alt="写真" />
// → <img src="/img/photo.webp" width="960" height="640" alt="写真" />

l--frame（画像や動画の枠） と組み合わせると、決まった縦横の比で画像を切り取れます。

jsx
<Frame as="figure" ar="16/9">
  <Media src="..." style={{ objectPosition: '50% 0%' }} alt="" width="960" height="640" />
</Frame>

表示例

html
<figure class="l--frame -ar:16/9">
  <img src="/img/sample-landscape.svg" width="960" height="540" alt="">
</figure>

Next.js の Image を使う#

Next.js の Image は、as に渡して使います。

jsx
import { Media } from 'lism-css/react';
import Image from 'next/image';

<Media as={Image} src="/img.jpg" alt="Dummy Image" width="960" height="640" />

Astro 版の Image と Picture#

lism-css/astro の <Media> は、as の値で、使う Astro のコンポーネントが自動で決まります。

as 出るもの
書かない・"img" Astro の <Image />
"picture" Astro の <Picture />
"video"・"iframe" など そのままの HTML のタグ

中で Astro の <Image />・<Picture /> を使っているので、それらの Props（quality・format・formats・inferSize など）も全部使えます。

jsx
import myImage from '@/img/img-1.jpg';

<Media src={myImage} alt="Dummy Image" quality="high" format="webp" />

<Media as="picture" src="https://example.com/photo.webp" width="960" height="640" alt="" formats={['avif', 'webp']} />
補足

ほかのサイトの画像を Astro の <Image>・<Picture> で使い、inferSize などを付けるときは、astro.config.ts に image.domains（または image.remotePatterns）を書いておく必要があります。

関連するページ#

公式ドキュメント

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

ページの一覧