リストビュー List View

データを縦方向に一覧表示する。行ごとにアイコン・テキスト・アクションを配置。

使用場面: メール一覧やタスクリストなど、アイテムを順番に表示する場面 採用例: Gmail, Todoist

ライブデモ

●
プロジェクト計画書を更新
Q4のマイルストーンを追加しました
3分前
●
デザインレビュー
UIモックの確認をお願いします
1時間前
●
週次ミーティング議事録
来週のアジェンダを共有します
昨日

ソースコード

<div class="demo-listview">
  <div class="demo-listview-item active">
    <span class="demo-listview-icon">&#9679;</span>
    <div class="demo-listview-body">
      <div class="demo-listview-title">プロジェクト計画書を更新</div>
      <div class="demo-listview-sub">Q4のマイルストーンを追加しました</div>
    </div>
    <span class="demo-listview-meta">3分前</span>
    <button class="demo-listview-action" aria-label="その他">&#8943;</button>
  </div>
  <div class="demo-listview-item">
    <span class="demo-listview-icon">&#9679;</span>
    <div class="demo-listview-body">
      <div class="demo-listview-title">デザインレビュー</div>
      <div class="demo-listview-sub">UIモックの確認をお願いします</div>
    </div>
    <span class="demo-listview-meta">1時間前</span>
    <button class="demo-listview-action" aria-label="その他">&#8943;</button>
  </div>
  <div class="demo-listview-item">
    <span class="demo-listview-icon">&#9679;</span>
    <div class="demo-listview-body">
      <div class="demo-listview-title">週次ミーティング議事録</div>
      <div class="demo-listview-sub">来週のアジェンダを共有します</div>
    </div>
    <span class="demo-listview-meta">昨日</span>
    <button class="demo-listview-action" aria-label="その他">&#8943;</button>
  </div>
</div>
.demo-listview { display: flex; flex-direction: column; gap: 4px; }
.demo-listview-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 8px;
  border-left: 3px solid transparent;
  background: #f9fafb; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.demo-listview-item:hover {
  background: color-mix(in srgb, var(--ui-primary) 6%, #fff);
}
.demo-listview-item.active {
  background: color-mix(in srgb, var(--ui-primary) 8%, #fff);
  border-left-color: var(--ui-primary);
}
.demo-listview-icon {
  font-size: 8px; color: #ccc;
}
.demo-listview-item.active .demo-listview-icon {
  color: var(--ui-primary);
}
.demo-listview-body { flex: 1; min-width: 0; }
.demo-listview-title {
  font-size: 14px; font-weight: 600; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-listview-sub {
  font-size: 12px; color: #888; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-listview-meta { font-size: 12px; color: #aaa; white-space: nowrap; }
.demo-listview-action {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: #bbb; padding: 4px;
  border-radius: 4px; transition: background 0.2s, color 0.2s;
}
.demo-listview-action:hover {
  background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
  color: var(--ui-primary);
}
document.querySelectorAll('.demo-listview-item').forEach(item => {
  item.addEventListener('click', function() {
    document.querySelectorAll('.demo-listview-item').forEach(i => i.classList.remove('active'));
    this.classList.add('active');
  });
});

AIプロンプト

Basic 
リストビューをHTML/CSSで作ってください。各行にアイコン、タイトル、サブテキスト、タイムスタンプを表示します。
Custom 
以下の仕様でリストビューを実装してください。
- 各行にアバター画像・タイトル・説明文・日時を表示
- 選択中の行はアクセントカラーのボーダーとハイライト背景
- ホバー時に背景色が変化
- 右端に「...」メニューボタン
- プライマリカラー: #2563eb
- スマホでもレスポンシブ対応
Advanced 
アクセシビリティ対応のリストビューを実装してください。
- role="listbox" / role="option" による適切なARIA構造
- キーボード操作（上下矢印でフォーカス移動、Enterで選択）
- 仮想スクロール対応（1000件以上のデータでも高速表示）
- 複数選択モード（Shift+クリックで範囲選択、Ctrl+クリックで個別選択）
- ドラッグ&ドロップで並べ替え
- スワイプでアクション（モバイル対応）
← カタログに戻る