プロフィール画像用の CSS のみの Tailwind CSS アバター。サイズ XS ～ XL、グループスタッキング、オンライン/オフラインステータスインジケーター。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
アバター コンポーネントは、コンパクトでカスタマイズ可能なコンテナにユーザー プロフィール画像またはイニシャルを表示します。 Frutjam の CSS カスタム プロパティを使用して構築されたアバターは、インターフェイス全体でユーザー、投稿者、またはチーム メンバーを表します。アバター システムは、画像とテキスト、複数のサイズ、色、形状、ステータス インジケーター、リング、グループの配置をサポートしており、ユーザー リスト、コメント、チーム表示、プロフィール セクション、メッセージング インターフェイスに最適です。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| avatar | ベース | イニシャルまたは画像が入った円形のアバター コンテナ |
| avatar-group | 修飾子 | 複数のアバターの重なり合うスタック |
| avatar-ring | 修飾子 | アバターの周囲に色付きのリング境界線を追加します |
| avatar-circle | スタイル | 完全な円形 (デフォルト) |
| avatar-rounded | スタイル | 角丸長方形 |
| avatar-square | スタイル | 丸みのない四角い形状 |
| avatar-online | スタイル | 緑色のオンラインステータスインジケーター |
| avatar-away | スタイル | 黄色の退席ステータスインジケーター |
| avatar-busy | スタイル | 赤色のビジーステータスインジケーター |
| avatar-offline | スタイル | 灰色のオフライン ステータス インジケーター |
| avatar-xs | サイズ | 極小 |
| avatar-sm | サイズ | 小さい |
| avatar-md | サイズ | 中 (デフォルト) |
| avatar-lg | サイズ | 大きい |
| avatar-xl | サイズ | 特大 |
| avatar-2xl | サイズ | 特大×2 |
| avatar-primary | 色 | 主要なテーマカラー |
| avatar-secondary | 色 | 二次テーマカラー |
| avatar-accent | 色 | アクセントのテーマカラー |
| avatar-neutral | 色 | ニュートラルなテーマカラー |
| avatar-info | 色 | 情報セマンティックカラー |
| avatar-success | 色 | 成功のセマンティックカラー |
| avatar-warning | 色 | 警告セマンティックカラー |
| avatar-error | 色 | エラー セマンティック カラー |
| avatar-ring-primary | 色 | 原色のリング |
| avatar-ring-secondary | 色 | セカンダリカラーのリング |
| avatar-ring-accent | 色 | アクセントカラーのリング |
| avatar-ring-neutral | 色 | ニュートラルカラーのリング |
| avatar-ring-info | 色 | 情報カラーのリング |
| avatar-ring-success | 色 | サクセスカラーのリング |
| avatar-ring-warning | 色 | 警告色のリング |
| avatar-ring-error | 色 | エラー色のリング |
基本的な使い方
テキストのイニシャルまたは色を使用してシンプルなアバターを作成します。
AB
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
画像付きアバター
自動画像調整とレスポンシブ サイズ調整を使用してユーザー プロフィール写真を表示します。
html
1 2 3 4 5 6 7 8 9 10 11 | <div class="avatar avatar-sm"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-md"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-lg"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" /> </div> |
アバターのサイズ
サイズ バリアントを使用して、さまざまなコンテキストに合わせてアバターを極小 (xs) から 2 倍大 (2xl) までスケールします。
XS
SM
MD
LG
XL
2XL
html
1 2 3 4 5 6 | <div class="avatar avatar-xs avatar-primary">XS</div> <div class="avatar avatar-sm avatar-secondary">SM</div> <div class="avatar avatar-md avatar-accent">MD</div> <div class="avatar avatar-lg avatar-primary">LG</div> <div class="avatar avatar-xl avatar-secondary">XL</div> <div class="avatar avatar-2xl avatar-accent">2XL</div> |
アバターの色
画像を使用しない場合は、カラー バリエーションを適用して、役割、チーム、ステータスごとにアバターを区別します。
A
B
C
D
E
F
G
H
html
1 2 3 4 5 6 7 8 | <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> <div class="avatar avatar-md avatar-neutral">E</div> <div class="avatar avatar-md avatar-success">F</div> <div class="avatar avatar-md avatar-warning">G</div> <div class="avatar avatar-md avatar-error">H</div> |
アバターの形状
デザイン システムに合わせて、円形 (デフォルト)、円形、または正方形から選択します。
●
◇
■
html
1 2 3 | <div class="avatar avatar-lg avatar-circle avatar-primary">●</div> <div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div> <div class="avatar avatar-lg avatar-square avatar-accent">■</div> |
イニシャル付きアバター
リスト、コメント スレッド、チーム セクションで簡単に識別できるようにユーザーのイニシャルを表示します。
JD
AR
MS
KL
html
1 2 3 4 | <div class="avatar avatar-sm avatar-primary">JD</div> <div class="avatar avatar-md avatar-secondary">AR</div> <div class="avatar avatar-lg avatar-accent">MS</div> <div class="avatar avatar-xl avatar-info">KL</div> |
ステータスインジケーター付きアバター
アバターとステータス バッジを組み合わせて、ユーザーの存在または空き状況 (オンライン、オフライン、忙しい、離席中) を示します。
JD
AR
MS
KL
html
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-online avatar-primary">JD</div> <div class="avatar avatar-md avatar-offline avatar-secondary">AR</div> <div class="avatar avatar-md avatar-busy avatar-accent">MS</div> <div class="avatar avatar-md avatar-away avatar-info">KL</div> |
リング枠付きのアバター
アバターの周囲に装飾リングを追加して、強調、ステータスの強調表示、または視覚的な分離を実現します。
A
B
C
html
1 2 3 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div> |
リングのカラーバリエーション
アバターの背景色とは別にリングの色を選択します。
A
B
C
D
E
F
G
html
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div> <div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div> <div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div> <div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div> <div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div> |
アバターグループ
チームメンバーや共同作業者を重ねて表示するために、自動マイナスマージンを使用して複数のアバターをスタックします。
A
B
C
D
html
1 2 3 4 5 6 | <div class="avatar-group"> <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> </div> |
さまざまなサイズのアバター グループ
グループ内で複数のサイズを組み合わせて視覚的な階層を作成します。
A
B
C
html
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-sm avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-lg avatar-accent">C</div> </div> |
ステータス付きアバター グループ
チーム グループ内の各メンバーの空き状況を表示します。
A
B
C
html
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-md avatar-online avatar-primary">A</div> <div class="avatar avatar-md avatar-offline avatar-secondary">B</div> <div class="avatar avatar-md avatar-busy avatar-accent">C</div> </div> |
組み合わせたバリアント
サイズ、色、形状、ステータス、リング修飾子を組み合わせて、複雑なアバターを表示します。
SK
AB
MR
html
1 2 3 4 5 | <div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div> <div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div> <div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な アバター クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。