ファイルブラウザ

パンくず・グリッド／リスト切替・クリックだけの複数選択を備えたファイル画面。フォルダを開くと階層が進み、選ぶと下部に「N 件を選択」の操作バーが現れる。

ENGLISH

File Browser

約183行画面のかたち / 実用サンプル: アプリ画面の一覧 →

プレビュー

クリック

操作クリック／タップで動きます。

仕様書

向く場面: フォルダ階層を辿るストレージ・資料庫
複数選択して一括操作させたい一覧
グリッド／リストを用途で切り替える画面
避ける場面: 1 件ずつ開くだけで一括操作が無い一覧
深い階層をツリーで見せたいとき（tree-view へ）
構成要素: パンくず
表示切替（グリッド／リスト）
列見出し
項目（サムネ／アイコン／名前／更新日／サイズ）
操作バー（件数／共有・DL・削除・解除）
持っている状態: 通常
ホバー
フォーカス
押下中
キーボード: Tab でパンくず→表示切替→一覧（Tab 停止は 1 つ）→操作バー（選択中だけ）。一覧は矢印・Home/End で移動、Space で選択トグル、Enter でフォルダを開く
支援技術: 一覧は role=listbox＋aria-multiselectable、項目は option＋aria-selected。パンくずの現在地は aria-current=page。操作バーは role=toolbar で、隠れている間は inert。選択は ✓ 文字＋枠色
動き: 操作バーが 250ms で下から現れる

デザインの要点

選択は Shift や Ctrl を要求せず、クリックの積み重ねで足す。解除も同じ操作。スマホと同じ作法
操作バーは選択した瞬間に下から現れ、件数を最初に言う。何に対して操作するかを先に示す
グリッドはサムネの色でファイル種別を、リストは更新日とサイズを見せる。切替は用途の違い
パンくずは今いる階層を太字にし、上位はリンクにする。戻る操作を別ボタンにしない

プロのサイトでの実例

Dropbox別サイト ↗フォルダ階層・グリッド/リストの切替・複数選択後の一括操作という型の代表例

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

フォルダは「何も選んでいないとき」のクリックで開き、選択中はクリックが選択に切り替わります（ダブルクリックは常に開く）。実装ではこの二重の意味を避けるため、チェックボックスを別に置く設計も検討してください。

コード（コピーして使えます）

<div class="fb-app">
  <header class="fb-head">
    <nav class="fb-crumbs" id="fb-crumbs" aria-label="現在地"></nav>
    <div class="fb-view" role="group" aria-label="表示形式">
      <button type="button" class="fb-view-btn is-on" data-view="grid" aria-pressed="true" aria-label="グリッド表示"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M3 3h6v6H3zM11 3h6v6h-6zM3 11h6v6H3zM11 11h6v6h-6z" fill="currentColor"/></svg></button>
      <button type="button" class="fb-view-btn" data-view="list" aria-pressed="false" aria-label="リスト表示"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
    </div>
  </header>
  <div class="fb-body">
    <div class="fb-list-head" aria-hidden="true"><span>名前</span><span>更新日</span><span>サイズ</span></div>
    <div class="fb-items is-grid" id="fb-items" role="listbox" aria-multiselectable="true" aria-label="ファイル"></div>
  </div>
  <div class="fb-bar" id="fb-bar" role="toolbar" aria-label="選択した項目の操作" inert>
    <span class="fb-bar-count" id="fb-bar-count">0 件を選択</span>
    <div class="fb-bar-actions">
      <button type="button" class="fb-bar-btn" id="fb-share">共有</button>
      <button type="button" class="fb-bar-btn" id="fb-download">ダウンロード</button>
      <button type="button" class="fb-bar-btn is-danger" id="fb-delete">削除</button>
      <button type="button" class="fb-bar-btn is-ghost" id="fb-clear">選択解除</button>
    </div>
  </div>
</div>