やってみよう上の「状態を変える」を押して、点の色を見てください
通知・フィードバックメジャー（よく見る）
オンライン表示（緑の点）
Presence Indicator
人のアイコンの右下に小さな点が付き、緑なら「今いる」、黄色なら「離席中」、灰色なら「オフライン」とわかる。
別名ログイン中の表示在席マークステータスドットアクティブ表示
どこで使われている？
- よく見かける場所
- Slack・Teams・Discord のメンバー一覧、チャット、オンラインゲーム
- 使うとよい場面
- 相手が今やり取りできるかどうかを知らせたいとき
- 避けたい場面
- いる・いないを知られたくないサービス（隠せるようにする）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「オンライン表示（緑の点）（Presence Indicator）」を実装してください。 動き：丸いアイコンの右下に、白いふち付きの小さな丸を重ね、オンラインは緑、離席中は黄色、取り込み中は赤、オフラインは灰色にする。状態が変わると色をなめらかに切り替える。 使う部品：アイコンの右下に position: absolute で点を重ねる
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | アイコンの右下に position: absolute で点を重ねる |
|---|---|
| iPhoneアプリなら | overlay(alignment: .bottomTrailing) で点を重ねる |
| Androidアプリなら | BadgedBox（または Box で点を重ねる） |
| Flutterなら | Stack ＋ Positioned で点を重ねる |
| React Nativeなら | position: absolute で点を重ねる |