Webパーツ辞典

データ表示

情報を読みやすく並べる部品。テーブル・タイムライン・チップ・アバター・数値タイルなど。

  • テーブルTable

    行と列で情報を並べる表。縦と横の両方に意味があるデータに使う。

    • 一覧
    • 比較

  • リストList

    項目を縦に並べたもの。並び順に意味があるかどうかで、番号付きと点付きを使い分ける。

    • 一覧

  • 定義リストDescription list

    「項目名」と「その中身」を対にして並べるリスト。住所や仕様のように、名前と値が対応するものに使う。

    • 一覧
    • 詳細

  • タイムラインTimeline

    出来事を時間の順に、縦の線に沿って並べる表示。配送状況や更新履歴に使う。

    • 一覧
    • 経過

  • ツリー表示Tree view

    親子の関係を、字下げと開閉で表す表示。フォルダやカテゴリーの階層に使う。

    • 一覧
    • 階層

  • チップChip

    短い語を丸い枠に入れた小さな部品。分類の表示にも、絞り込み条件の表示にも使う。

    • 一覧
    • 絞り込み

  • アバターAvatar

    利用者を表す小さな丸い画像。写真が無いときは頭文字や既定の絵で埋める。

    • 表示
    • 人物

  • 数値タイルStat tile

    1つの数値を大きく見せる小さな箱。前と比べてどう変わったかを添えることが多い。

    • 表示
    • 数値

  • 星評価Rating

    星の数で評価を示す部品。見せるだけの場合と、押して評価してもらう場合がある。

    • 表示
    • 評価

  • ソート可能なテーブル見出しSortable table header

    表の列見出しを押すと、その列で行を並べ替えられるもの。見出しの横の三角で、どの列をどちら向きに並べているかを示す。

    • 一覧
    • 操作

  • チャットのメッセージChat message

    会話を角の丸い枠で1通ずつ積み上げる表示。自分の発言は右に色つきで、相手は左にアイコンつきで並び、時刻や「入力中」の動く点が添う。

    • 表示
    • 会話

  • テーブルの操作バーTable toolbar

    表のすぐ上に置く横長の帯。検索欄・並べ替え・表示する列の設定と件数を並べ、行を選ぶと「n件を選択中」と一括操作のボタンが現れる。

    • 一覧
    • 一括操作

  • カレンダー（月表示）Month calendar

    1か月の日付を曜日の見出しの下にマス目で並べ、定休日やイベント、予約の空き（○△×）を各日に書き込んで見せる表。今日の日付は枠で囲む。

    • 表示
    • 日付

  • アバターグループAvatar group

    丸い顔アイコンを少しずつ重ねて横一列に並べ、入りきらない人数を最後の丸に「+5」とまとめて見せる表示。参加者やメンバーの顔ぶれに使う。

    • 表示
    • 人物

  • コメントスレッドComment thread

    丸いアイコンと名前・日時の下に本文を置き、返信やいいねのボタンを添えたコメントを縦に並べる表示。返信は1段字下げして左の線で親につなぐ。

    • 表示
    • 会話

見分け方