本文へ移動
セクション
言語、現在は日本語
Rastrillo デザインシステム
言語、現在は日本語
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

表示

画面を組み立てる小さな語彙です。状態、人物、進捗、そしてただひとつのお知らせの形。

どの例も実際に動きますが、リンクはどこにも移動しません。 HTML にはコピーできるマークアップがあります。

status-pill

レコードの状態を色付きのピルで表します。色とラベルの両方。

プレビュー

neutral

<span rst-status rst-tone="neutral">下書き</span>

positive

<span rst-status rst-tone="positive">公開済み</span>

warning

<span rst-status rst-tone="warning">予約済み</span>

negative

<span rst-status rst-tone="negative">失敗</span>

neutral

{{template "status-pill" dict "Label" "下書き"}}

positive

{{template "status-pill" dict "Label" "公開済み" "Tone" "positive"}}

warning

{{template "status-pill" dict "Label" "予約済み" "Tone" "warning"}}

negative

{{template "status-pill" dict "Label" "失敗" "Tone" "negative"}}

neutral Tone の既定値は neutral なので、この呼び出しでは省いています。

badge

小さな固定の目印に使う、大文字の枠付きチップです。レコードの状態を示す status-pill とは別物です。

プレビュー

トーンなし（静かな既定値）

<span rst-badge>下書き</span>

neutral

<span rst-badge="neutral">社内</span>

positive

<span rst-badge="positive">公開中</span>

warning

<span rst-badge="warning">ベータ</span>

negative

<span rst-badge="negative">売り切れ</span>

トーンなし（静かな既定値）

{{template "badge" dict "Label" "下書き"}}

neutral

{{template "badge" dict "Label" "社内" "Tone" "neutral"}}

positive

{{template "badge" dict "Label" "公開中" "Tone" "positive"}}

warning

{{template "badge" dict "Label" "ベータ" "Tone" "warning"}}

negative

{{template "badge" dict "Label" "売り切れ" "Tone" "negative"}}

meter

数値付きの容量バー。

プレビュー

空

<span rst-meter>
  <meter rst-meter-bar value="0" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>0/500</span>
</span>

途中まで

<span rst-meter>
  <meter rst-meter-bar value="42" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>210/500</span>
</span>

ほぼ満杯

<span rst-meter>
  <meter rst-meter-bar value="82" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>412/500</span>
</span>

満杯

<span rst-meter>
  <meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>500/500</span>
</span>

上限超過

<span rst-meter>
  <meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>700/500</span>
</span>

空

{{template "meter" dict "Percent" 0 "Text" "0/500"}}

途中まで

{{template "meter" dict "Percent" 42 "Text" "210/500"}}

ほぼ満杯

{{template "meter" dict "Percent" 82 "Text" "412/500"}}

満杯

{{template "meter" dict "Percent" 100 "Text" "500/500"}}

上限超過

{{template "meter" dict "Percent" 140 "Text" "700/500"}}

上限超過 塗りは partial の中で 100% に制限されます。

stat

ダッシュボードのひとつの数値です。ラベルと、どれだけ変わったかが付きます。

大きい数値

プレビュー

これは <div rst-stats> の中に置きます。

<div rst-stat="lead">
  <span rst-stat-label>今月の売上</span>
  <span rst-stat-num>€48,210</span>
  <span rst-stat-delta rst-tone="positive">&#43;12%</span>
  <span rst-stat-note>先月比</span>
</div>

これは <div rst-stats> の中に置きます。

{{template "stat" dict
    "Label" "今月の売上"
    "Value" "€48,210"
    "Delta" "+12%"
    "Tone" "positive"
    "Note" "先月比"
    "Lead" true}}

行のどれかひとつに Lead を付けると大きくなります。同じ部品を大きくしただけです。

小さい数値

プレビュー

これは <div rst-stats> の中に置きます。

<div rst-stat>
  <span rst-stat-label>未払いの請求書</span>
  <span rst-stat-num>24</span>
</div>

これは <div rst-stats> の中に置きます。

{{template "stat" dict "Label" "未払いの請求書" "Value" "24"}}

必要なのはラベルと数値だけです。ほかはすべて任意です。

下がるのがよいとき

プレビュー

これは <div rst-stats> の中に置きます。

<div rst-stat>
  <span rst-stat-label>初回返信までの時間</span>
  <span rst-stat-num>1時間12分</span>
  <span rst-stat-delta rst-tone="positive">−38%</span>
  <span rst-stat-note>先週比</span>
</div>

これは <div rst-stats> の中に置きます。

{{template "stat" dict
    "Label" "初回返信までの時間"
    "Value" "1時間12分"
    "Delta" "−38%"
    "Tone" "positive"
    "Note" "先週比"}}

色を決めるのはあなたで、部品ではありません。ここでは数値が下がり、それはよい知らせなので、変化は緑です。

上がるのがよくないとき

プレビュー

これは <div rst-stats> の中に置きます。

<div rst-stat>
  <span rst-stat-label>失敗した支払い</span>
  <span rst-stat-num>9</span>
  <span rst-stat-delta rst-tone="negative">&#43;3</span>
  <span rst-stat-note>先週比</span>
</div>

これは <div rst-stats> の中に置きます。

{{template "stat" dict
    "Label" "失敗した支払い"
    "Value" "9"
    "Delta" "+3"
    "Tone" "negative"
    "Note" "先週比"}}

ここでは数値が上がり、それはよくない知らせなので、変化は赤です。

どちらとも言えないとき

プレビュー

これは <div rst-stats> の中に置きます。

<div rst-stat>
  <span rst-stat-label>平均セッション時間</span>
  <span rst-stat-num>4分12秒</span>
  <span rst-stat-delta rst-tone="neutral">&#43;18秒</span>
  <span rst-stat-note>金曜日から</span>
</div>

これは <div rst-stats> の中に置きます。

{{template "stat" dict
    "Label" "平均セッション時間"
    "Value" "4分12秒"
    "Delta" "+18秒"
    "Note" "金曜日から"}}

色を指定しなければ、変化は灰色になります。よいか悪いか言えないときはそうしてください。

短くした数値

プレビュー

これは <div rst-stats> の中に置きます。

<div rst-stat>
  <span rst-stat-label>送信済みメッセージ</span>
  <span rst-stat-num><data value="4120">4.1k</data></span>
</div>

これは <div rst-stats> の中に置きます。

{{template "stat" dict "Label" "送信済みメッセージ" "Value" "4.1k" "Exact" "4120"}}

4120 ではなく 4.1k と表示していますか。完全な数値は Exact に入れてください。スクリーンリーダーは画面にあるものしか読まないので、人に必要なものは数値そのものに残してください。

person

イニシャルのアバター、名前、メールアドレス。人のレコードをすばやく見分けるためのものです。

名前とメールアドレス

プレビュー 
<a rst-person href="/people/1">
  <span rst-person-av aria-hidden="true">G</span>
  <span rst-person-meta>
    <span rst-person-name>Grace Hopper</span>
    <span rst-person-email>grace@example.com</span>
  </span>
</a>
{{template "person" dict
    "Href" "/people/1"
    "Name" "Grace Hopper"
    "Email" "grace@example.com"
    "Initial" "G"}}

大サイズ、詳細画面の見出しに使う大きさ

プレビュー 
<a rst-person="lg" href="/people/2">
  <span rst-person-av aria-hidden="true">A</span>
  <span rst-person-meta>
    <span rst-person-name>Ada Lovelace</span>
    <span rst-person-email>ada@example.com</span>
  </span>
</a>
{{template "person" dict
    "Href" "/people/2"
    "Name" "Ada Lovelace"
    "Email" "ada@example.com"
    "Initial" "A"
    "Large" true}}

イニシャルなし

プレビュー 
<a rst-person href="/people/3">
  <span rst-person-av="empty" aria-hidden="true"></span>
  <span rst-person-meta>
    <span rst-person-name>未承諾の招待</span>
    <span rst-person-email>invited@example.com</span>
  </span>
</a>
{{template "person" dict
    "Href" "/people/3"
    "Name" "未承諾の招待"
    "Email" "invited@example.com"}}

actor

誰が行ったかを言葉で示します。人の名前、またはエージェントとその代理先の人です。バッジもアイコンもありません。

人の代理として動くエージェント

プレビュー 
<span rst-actor>Claude（Grace Hopper の代理）</span>
{{template "actor" dict "Actor" .Actor}}

起動時に ui.ActorName を一度設定して、サブジェクトを名前に変えます。アプリ自身、つまりゼロ値の Actor は何も描画しません。

人

プレビュー 
<span rst-actor>Grace Hopper</span>
{{template "actor" dict "Actor" .Actor}}

callout

お知らせの語彙はこれひとつです。色付きの帯、トーンのアイコン、任意の太字見出し、本文ひと段落。

info

プレビュー 
<div rst-callout rst-tone="info">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  </span>
  <div rst-callout-body>
    <p>サイトを公開するまで、投稿はメンバーにしか表示されません。</p>
  </div>
</div>
{{template "callout" dict "Body" "サイトを公開するまで、投稿はメンバーにしか表示されません。" "Tone" "info"}}

positive

プレビュー 
<div rst-callout rst-tone="positive">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
  </span>
  <div rst-callout-body>
    <strong>支払いが接続されました</strong>
    <p>チケットの支払いを受け付けられるようになりました。</p>
  </div>
</div>
{{template "callout" dict
    "Body" "チケットの支払いを受け付けられるようになりました。"
    "Title" "支払いが接続されました"
    "Tone" "positive"}}

warning

プレビュー 
<div rst-callout rst-tone="warning">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
  </span>
  <div rst-callout-body>
    <strong>販売を始めるには支払いを接続してください</strong>
    <p>イベントは公開中ですが、まだ支払いを受け付けられません。</p>
  </div>
</div>
{{template "callout" dict
    "Body" "イベントは公開中ですが、まだ支払いを受け付けられません。"
    "Title" "販売を始めるには支払いを接続してください"
    "Tone" "warning"}}

negative

プレビュー 
<div rst-callout rst-tone="negative">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  </span>
  <div rst-callout-body>
    <strong>前回のインポートに失敗しました</strong>
    <p>何も変更されていません。91行目を直してもう一度お試しください。</p>
  </div>
</div>
{{template "callout" dict
    "Body" "何も変更されていません。91行目を直してもう一度お試しください。"
    "Title" "前回のインポートに失敗しました"
    "Tone" "negative"}}

negative、アラートとして読み上げ

プレビュー 
<div rst-callout rst-tone="negative" role="alert">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  </span>
  <div rst-callout-body>
    <strong>インポートが止まりました</strong>
    <p>何も変更されていません。91行目を直してもう一度お試しください。</p>
  </div>
</div>
{{template "callout" dict
    "Body" "何も変更されていません。91行目を直してもう一度お試しください。"
    "Title" "インポートが止まりました"
    "Tone" "negative"
    "Alert" true}}

alert は role="alert" を付けて、重要なメッセージを伝えます。

detail-list

詳細画面でレコードを説明する定義リスト。機械寄りの値には等幅の印を付けます。

4つの項目、うち1つは機械寄り

プレビュー

これは <section rst-box> の中に置きます。

<dl rst-detail>
  <dt>公開範囲</dt>
  <dd>メンバー</dd>
  <dt>トップページ</dt>
  <dd>いいえ</dd>
  <dt>公開済み</dt>
  <dd>
    <time datetime="2026-08-02">2026年8月2日</time>
  </dd>
  <dt>参照番号</dt>
  <dd class="rst-mono">post_01H9ZQ</dd>
</dl>

これは <section rst-box> の中に置きます。

{{template "detail-list" dict
    "Items" (list
        (dict "Label" "公開範囲" "Value" "メンバー")
        (dict "Label" "トップページ" "Value" "いいえ")
        (dict "DateTime" "2026-08-02" "Label" "公開済み" "Value" "2026年8月2日")
        (dict "Label" "参照番号" "Mono" true "Value" "post_01H9ZQ"))}}

notice

リダイレクトのあとに出る一行の確認です。dict ではなくただの文字列を受け取り、空なら何も描画しません。

保存を知らせるメッセージ

プレビュー 
<p rst-notice role="status">投稿を保存しました。</p>
{{template "notice" "投稿を保存しました。"}}

region:notice

どのシェルもページに置いておく通知です。ページデータの Notice を表示するので、スクリーンリーダーがフラッシュを読み上げ、live.js がその場で中身を入れ替えられます。

保存を知らせるメッセージ

プレビュー 
<div id="notice" role="status">
  <p rst-notice>投稿を保存しました。</p>
</div>
{{template "region:notice" dict "Notice" "投稿を保存しました。"}}

form-error

フォームのエラー要約行です（role="alert"）。ただの文字列を受け取り、エラーがなければ何も描画しません。

拒否された送信

プレビュー 
<p rst-form-error role="alert">そのタイトルはすでに使われています。</p>
{{template "form-error" "そのタイトルはすでに使われています。"}}

job-status

バックグラウンド処理のポーリング用フラグメントです。data-poll 属性は処理の実行中だけ出力されます。付けないことがポーリングの止め方です。

実行中

プレビュー 

<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
  <span rst-spin aria-hidden="true"></span> <bdi><strong>インポート</strong></bdi>を実行中: <bdi>400件中128件</bdi>…
  <progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>

{{template "job-status" dict
    "Name" "インポート"
    "Percent" 32
    "PollSeconds" 2
    "PollURL" "/jobs/1/fragment"
    "Progress" "400件中128件"
    "Status" "running"}}

これはポーリングします。このページで唯一ネットワークに何かを求める見本であり、静的サイトでは答えが返ってくることがありません。

完了

プレビュー 

<div rst-job>
  <bdi><strong>インポート</strong></bdi>は完了しました。
</div>

{{template "job-status" dict "Name" "インポート" "Status" "done"}}

失敗

プレビュー 

<div rst-job>
  <bdi><strong>インポート</strong></bdi>は失敗しました: <bdi>row 91: no such column &#34;published&#34;</bdi>
</div>

{{template "job-status" dict
    "Err" "row 91: no such column \"published\""
    "Name" "インポート"
    "Status" "failed"}}