チャット風の吹き出し

アバター（人の顔の小さな画像）と吹き出しを並べて、チャットで話しているような見た目を作る例です。並べ方は Lism のクラスに任せ、吹き出しの形だけを b--chat という少しの CSS で作ります。

どんなときに使う？#

• 2人の会話の形で、説明やよくある質問を見せたいとき
• 「言ったこと」と「心の中で思ったこと」を、吹き出しの形で分けたいとき

組み立て#

吹き出し1つは、次の部品でできています。

--speak と --think は、どちらか1つを b--chat に足します。

使い方#

左にアバター、右に吹き出しが出る形です。

<div class="b--chat b--chat--speak l--grid" data-chat-dir="start">
  <div class="b--chat_avatar l--frame" aria-hidden="true">
    <img src="/img/sample-square.svg" alt="" width="60" height="60" />
  </div>
  <div class="b--chat_name">Taro</div>
  <div class="b--chat_body">
    <div class="b--chat_deco a--decorator is--skipFlow u--cbox" aria-hidden="true"></div>
    <div class="b--chat_content l--flow u--cbox">
      <p>こんにちは。</p>
    </div>
  </div>
</div>

アバターを右に出すときは data-chat-dir="end" にします。吹き出しの色を変えるときは、style="--keycolor:var(--green)" のように色の変数を渡します。

<div class="b--chat b--chat--think l--grid" style="--keycolor:var(--blue)" data-chat-dir="end">
  …（中身は上と同じ）…
</div>

u--cbox は、--keycolor の色から、うすい背景と文字の色を作るクラスです。吹き出しの本体としっぽの両方に付けるので、両方が同じ色になります。

足す CSS の要点#

公式ドキュメントに、そのまま写して使える CSS が載っています。全体を @layer lism-block { … } で囲んだまま写すと、Lism の CSS の重なりの順番にうまく入り、あとから lism-custom のレイヤーで上書きできます（レイヤーについては CSS のレイヤーと強さの順番）。

CSS がしていることは、おおまかに次のとおりです。

• b--chat に、色の変数 --keycolor の既定（var(--gray)）と、吹き出しの背景の濃さ --cbox-bgPct: 8% を入れる

• 名前（b--chat_name）は、小さな斜めの文字で、少し薄い文字色（--text-2）にする

• b--chat に grid-template-areas を書いて、左の列にアバター、右の列の上に名前、下に吹き出しを置く

• アバターの大きさ（--avator-size）を、入れ物の幅に合わせて 48px〜64px のあいだで変える。しっぽの大きさ（--deco-size）はアバターの大きさから決める

• 吹き出しの本体（b--chat_content）に、内側の余白・角の丸み・最大の幅を付ける。中の段落のすきまは少しせまくする

• しっぽ（b--chat_deco）を吹き出しの横に position: absolute で置き、mask に SVG の形を入れて切り抜く。--speak は三角、--think は小さな丸2つ

• data-chat-dir="end" のときは、列の左右を入れかえ、しっぽを左右反転する

• --speak のときだけ、しっぽ側の吹き出しの角の丸みを 0 にする（この部分だけは @layer の外に書く。セレクタの強さを保つため）

CSS の全文は長いので、ここには載せていません。公式ドキュメントの Chat のページにある chat.css を写してください。

React・Astro で書く場合#

Grid・Frame・Lism・Decorator・Flow を組み合わせ、それぞれに class で上のクラスを付けます。色は keycolor で渡します。

<Grid class="b--chat b--chat--speak" keycolor="green" data-chat-dir="end">
  <Frame class="b--chat_avatar" aria-hidden="true">
    <img src="/img/sample-square.svg" alt="" width="60" height="60" />
  </Frame>
  <Lism class="b--chat_name">Hanako</Lism>
  <Lism class="b--chat_body">
    <Decorator class="b--chat_deco" util="cbox" isSkipFlow />
    <Flow class="b--chat_content" util="cbox">
      <p>こんにちは。</p>
    </Flow>
  </Lism>
</Grid>

関連するページ#

• l--grid（Grid で並べる）
• l--flow（文章の間をあける）
• a--decorator（飾りの要素）
• Utility Class（u--*）
• CSS のレイヤーと強さの順番