Lism Tips

DummyText（仮の文章）

DummyText は、デザインを作っている途中に、まだ無い文章の代わりに仮の文章を出すコンポーネントです。言語と長さの選び方、Props をまとめています。

DummyText（ダミーテキスト）は、まだ本物の文章が無いところに、仮の文章を出すコンポーネントです。英語・日本語・アラビア語の仮の文章を、長さを選んで出せます。@lism-css/ui に入っています。

どんなときに使う？#

  • ページの見た目を先に作るとき、文章が入ったときの見え方を確かめたいとき
  • カードや一覧の見本に、長さのちがう文章を入れて比べたいとき

使い方#

DummyText は React・Astro のコンポーネントです。部品ごとの決まった場所から読み込みます。

jsx
import { DummyText } from '@lism-css/ui/astro/DummyText';
// React のとき
import { DummyText } from '@lism-css/ui/react/DummyText';

何も指定しないと、英語のふつうの長さの文章が <p> で出ます。

jsx
<DummyText />
<DummyText lang="ja" />
補足

DummyText には、見た目のクラスや CSS はありません。公式ドキュメントにあるのは React・Astro の読み込み方だけで、HTML だけで書くときの書き方は載っていません。HTML だけで作るときは、仮の文章を自分で書き入れます。

Props#

Props 何をするか 初期値
lang 言語。en（英語）・ja（日本語）・ar（アラビア語） en
length 長さ。xs・s・m・l・xl・codes から選ぶ m
pre 仮の文章の前に付ける文字 なし
as 出す HTML のタグ p
offset 区切りの記号（,・.・、・。）の単位で、文章を切り捨てる。文章が短くなる なし
補足

ar（アラビア語）は、length="s" の長さしか用意されていません。

長さを選ぶ#

length で長さを変えます。pre を付けると、どの長さかが分かるように前に文字を足せます。

jsx
<DummyText lang="ja" length="xs" pre="xs: " />
<DummyText lang="ja" length="s" pre="s: " />
<DummyText lang="ja" length="m" pre="m: " />
<DummyText lang="ja" length="l" pre="l: " />
<DummyText lang="ja" length="xl" pre="xl: " />

length="codes" もあります。

jsx
<DummyText lang="ja" length="codes" />

少しだけ短くする#

offset に数を入れると、区切りの記号の単位で文章が切り捨てられ、少し短くなります。

jsx
<DummyText lang="ja" offset={1} />
<DummyText lang="ja" length="l" offset={3} />

関連するページ#

公式ドキュメント

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

ページの一覧