Lism Tips

Avatar（アバター）

Avatar は、人のアイコン画像を丸く切り抜いて見せる部品です。大きさの変え方、画像が無いときに頭文字を出す方法、Props をまとめています。

Avatar（アバター）は、人のアイコン画像を丸く切り抜いて見せる部品です。画像が無いときは、名前の最初の1文字を丸の中に出せます。@lism-css/ui に入っています。

どんなときに使う？#

  • コメントやレビューの横に、書いた人の顔やアイコンを小さく出すとき
  • 画像を用意していない人を、名前の頭文字で表したいとき

使い方#

b--avatar と l--frame（画像の枠）を一緒に付け、中に <img> を入れます。大きさは -w と変数 --w で決めます。

表示例

山田さんのアイコン
html
<div class="b--avatar l--frame -w" style="--w: 4rem">
  <img src="/img/sample-square.svg" alt="山田さんのアイコン" decoding="async" />
</div>

l--frame の中の画像は、枠いっぱいの幅と高さに広がります。--w を指定しないと、大きさは 2em（文字2つぶん）です。縦横の比は 1:1 に固定され、角丸 var(--bdrs--99) で丸くなります。

枠線と影を付ける#

-bd（枠線）・-bxsh:20（影）などの Property Class をそのまま足せます。-bxsh は box-shadow（箱の影）の略です。

表示例

html
<div class="l--cluster -g:20 -ai:center">
  <div class="b--avatar l--frame -w" style="--w: 3rem">
    <img src="/img/sample-square.svg" alt="" decoding="async" />
  </div>
  <div class="b--avatar l--frame -w -bd -bxsh:20" style="--w: 5rem; --bdw: 2px; --bdc: var(--base)">
    <img src="/img/sample-square.svg" alt="" decoding="async" />
  </div>
</div>

画像が無いときは頭文字を出す#

l--frame のかわりに l--center（真ん中に置く）を使い、b--avatar--initial を足します。中には名前の最初の1文字を入れます。

表示例

Y
鈴
html
<div class="l--cluster -g:20 -ai:center">
  <div class="b--avatar b--avatar--initial l--center -w" style="--w: 2rem">
    <span role="img" aria-label="Yamada Taro">Y</span>
  </div>
  <div class="b--avatar b--avatar--initial l--center -w -bgc:brand -c:base" style="--w: 3rem">
    <span role="img" aria-label="鈴木">鈴</span>
  </div>
</div>
  • 背景は var(--base-2)（うすい灰色）です。-bgc などで変えられます
  • 英字は CSS の text-transform: uppercase で大文字になります
  • 文字の大きさは、アバターの大きさ（--w）の半分になります
補足

画像の読み込みに失敗したとき、自動で頭文字に切り替わるしくみはありません。

専用のクラスと変数#

クラス・変数 意味 初期値
b--avatar アバターの形（1:1・丸） なし
b--avatar--initial 頭文字を出す形 なし
--w アバターの大きさ（幅） 2em

React・Astro で書く場合#

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

<Avatar size="4rem" src="/img/avatar.webp" alt="山田さんのアイコン" />
<Avatar size="3rem" name="鈴木" bgc="brand" c="base" />

Astro では @lism-css/ui/astro/Avatar から読み込みます。src を書かないと、自動で l--center と b--avatar--initial の形になります。

Props 何をするか 初期値
size 大きさ "2em"
src 画像の場所。書かないと name の頭文字を出す なし
name 名前。src が無いとき、最初の1文字を出す。alt が無いときは代わりの文章にも使う なし
alt 画像の代わりの文章。name より優先される なし
ヒント

すぐ隣に名前の文字が並んでいるときは、alt="" にすると、読み上げソフトが名前を2回読むのを防げます（飾りの画像として扱われます）。

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

本体のクラスだけなら、l--frame に -ar:1/1（縦横の比）と -bdrs:99（丸い角）を付けます。

表示例

html
<div class="l--frame -ar:1/1 -w -bdrs:99" style="--w: 4em">
  <img src="/img/sample-square.svg" alt="" decoding="async" />
</div>

関連するページ#

公式ドキュメント

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

ページの一覧