UI Component Lab English

← コンポーネント一覧

データ表示

List リスト（箇条書きリスト）

項目を1行に1つずつ縦に並べたもの。アイコンや補足の2行目が付くことが多い。

  • 会議メモ 5分前に編集
  • 旅行の計画 昨日編集
  • レシピ集 先週編集

別名

見分けるポイント

細い線で区切られた行が並び、各行の左にアイコンやアバター、主な文、その下に小さな灰色の文がある。

挙動

  • 項目にチェックボックスやスイッチを置いたり、詳細ページへのリンクにしたりすることもある。
  • ネイティブの <ul> や <ol> にすると、スクリーンリーダーが項目数を読み上げる。

キーボード操作

キー動作
—文字だけのリストにはない。項目の中の操作部品は、それぞれのキー操作に従う。

使い分け・注意点

  • 項目名と値の組には、説明リストを使う。
  • テーブル: リストは列を持たずに1行に1項目を並べ、テーブルは1行の複数の値を列で比べる。
  • カード: リストは項目を行で詰めて並べ、カードは1件ごとに画像や操作を置く余裕がある。
  • 説明リスト: リストは項目を1つずつ並べ、説明リストは項目名と値や説明を組にして並べる。

出典