Lism Tips

Callout（大事なことの囲み）

Callout は、文章の中の大事なことを、左に色の線が入った囲みで目立たせる部品です。type ごとの色、題名の付け方、Props をまとめています。

Callout（コールアウト）は、文章の中の大事なことを、左に色の線が入った囲みで目立たせる部品です。題名とアイコンを付けられます。@lism-css/ui に入っています。

このサイトの「ヒント」「補足」「注意」の囲みも、Callout の形で描いています。

どんなときに使う？#

  • 記事の中で、読み落としてほしくないポイントや注意を囲むとき
  • 「ヒント」「注意」のように、種類ごとに色を分けて見せたいとき

短いお知らせだけなら Alert が向いています。

使い方#

b--callout に l--stack（縦に並べる）と u--cbox（色の付いた箱にする）を一緒に付けます。中には、題名の行（b--callout_title）と本文の箱（b--callout_body）を置きます。色は変数 --keycolor で決めます。

表示例

題名

大事なことを、ここに書きます。

html
<div class="b--callout l--stack u--cbox" style="--keycolor: var(--gray)">
  <div class="b--callout_title l--flex -c:inherit">
    <svg class="a--icon" viewBox="0 0 16 16" width="1.25em" height="1.25em" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="7"></circle></svg>
    <span>題名</span>
  </div>
  <div class="b--callout_body l--flow -flow:s">
    <p>大事なことを、ここに書きます。</p>
  </div>
</div>

公式の既定では、題名の行は --keycolor の色の太字になります。明るい色では文字が背景に負けて読みにくいので、このページの表示例では題名に -c:inherit を付け、文字を本文の色にしています（このサイトの注意書きと同じ形です）。上の例のアイコンは丸を描いただけの仮のものです。実際には @lism-css/icons などのアイコンを入れます。

色の種類（type）#

React・Astro では type で色とアイコンの組み合わせを選べます。HTML で書くときは、--keycolor に下の色を入れます。

type 色（--keycolor）
note（初期値） var(--gray)
info var(--blue)
alert var(--red)
warning var(--yellow)
point var(--orange)
check var(--green)
help var(--purple)

表示例

info（青）

本文です。

alert（赤）

本文です。

check（緑）

本文です。

html
<div class="l--stack -g:20">
  <div class="b--callout l--stack u--cbox" style="--keycolor: var(--blue)">
    <div class="b--callout_title l--flex -c:inherit"><span>info（青）</span></div>
    <div class="b--callout_body l--flow -flow:s"><p>本文です。</p></div>
  </div>
  <div class="b--callout l--stack u--cbox" style="--keycolor: var(--red)">
    <div class="b--callout_title l--flex -c:inherit"><span>alert（赤）</span></div>
    <div class="b--callout_body l--flow -flow:s"><p>本文です。</p></div>
  </div>
  <div class="b--callout l--stack u--cbox" style="--keycolor: var(--green)">
    <div class="b--callout_title l--flex -c:inherit"><span>check（緑）</span></div>
    <div class="b--callout_body l--flow -flow:s"><p>本文です。</p></div>
  </div>
</div>

題名を付けない#

題名の行を書かなければ、本文だけの囲みになります。

表示例

題名の無い、本文だけの囲みです。

html
<div class="b--callout l--stack u--cbox" style="--keycolor: var(--blue)">
  <div class="b--callout_body l--flow -flow:s">
    <p>題名の無い、本文だけの囲みです。</p>
  </div>
</div>

専用の変数#

変数 意味 初期値
--keycolor 線・題名・箱の色 なし（u--cbox と一緒に使う）
--bds 左の線の種類 solid
--bdw 左の線の太さ 3px
--bdc 左の線の色 var(--keycolor)
--cbox-bdPct 線に --keycolor を混ぜる割合 100%（--keycolor そのままの色）

ほかに、すきま var(--s10)・内側の余白 var(--s20) が付きます。線は左側（文章の書き始めの側）にだけ引かれます。

React・Astro で書く場合#

jsx
import { Callout } from '@lism-css/ui/react/Callout';

<Callout title="ポイント" type="point">
  <p>大事なことを書きます。</p>
</Callout>

Astro では @lism-css/ui/astro/Callout から読み込みます。

Props 何をするか 初期値
type 色とアイコンの組み合わせを選ぶ "note"
keycolor 色を決める なし
icon アイコンを変える（アイコンのコンポーネントか SVG の文字列） @lism-css/ui に入っているもの
title 題名の文字 なし
flow 本文を囲む Flow に渡す flow なし
補足

アイコンは、title を指定したときだけ出ます。title を書かないと、題名の行そのものが出ません。

@lism-css/ui を使わずに作る#

本体のクラスだけでも、同じような囲みを作れます。-bd-s は、文章の書き始めの側（左）だけに枠線を引くクラスです。

表示例

Callout

本体のクラスだけで作った囲みです。

html
<div class="l--stack u--cbox -p:20 -g:10 -bdc:keycolor -bd-s -bdrs:10" style="--keycolor: var(--blue); --bdw: 3px">
  <div class="l--flex -c:keycolor -fw:bold -ai:center -g:10">
    <span>Callout</span>
  </div>
  <div>
    <p>本体のクラスだけで作った囲みです。</p>
  </div>
</div>

関連するページ#

公式ドキュメント

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

ページの一覧