本文へ移動

§08

コンテンツ閲覧

Content

Patterns
13
Demos
13

§08-01

無限スクロール

末尾まで来たら次の内容を自動で読み込む。

ページ送りの操作なしに続きを読み進められる。フィードや画像一覧など、終わりを意識せず流し見する内容に向き、目的の項目を探す一覧には向かない。

実装のポイントIntersectionObserver で末尾の番兵要素を監視し、rootMargin で少し手前から読み込む。読み込み中の重複発火を防ぎ、終端と失敗時の再試行も用意する。

  • ブラウザ API
  • 非同期
詳細

§08-02

ページネーション

一覧をページに分けて番号で移動する。

件数の多い一覧を一定数ずつ区切って見せる。特定の位置に戻ったりページを共有したりする必要がある検索結果や記事一覧に向く。

実装のポイントページ数が多い場合は先頭・末尾・現在の前後だけを出し、間を「…」で省略する。現在ページには aria-current=page を付け、ページ番号は URL に反映する。

  • 状態管理
詳細

§08-03

Virtual list (windowing)

画面内の行だけを描画して大量データを扱う。

数万件の一覧でもスクロールが滑らかに動き、初期表示も速い。ログや大規模テーブルなど、全件表示が重くなる場面で使う。

実装のポイントscrollTop から表示範囲を計算し、前後にバッファ行を足して描画する。全体の高さは spacer で確保し、各行は absolute か translateY で配置する。

  • 状態管理
詳細

§08-04

Masonry グリッド

高さの違うタイルを隙間なく敷き詰めて並べる。

縦横比の異なる画像やカードを余白なく並べ、一覧の密度を高める。写真やピン留めのように、サイズを揃えられない内容の一覧に向く。

実装のポイントCSS columns と break-inside: avoid で手軽に組めるが、並び順が縦方向になる。横方向の順序が必要なら JS で列ごとの高さを比較して振り分ける。

  • CSS のみ
詳細

§08-05

カードフィード

同じ形のカードを並べて記事や投稿を見せる。

画像と見出しをひと塊で見比べられ、一覧を眺めて選ぶ行動に合う。ブログや商品、イベントのように視覚的な手がかりがある内容に向く。

実装のポイントカードは画像比率を固定して読み込み時のレイアウトシフトを防ぐ。全体をリンクにする場合は見出しのリンクを擬似要素で広げ、入れ子のリンクを避ける。

  • CSS のみ
詳細

§08-06

ストーリーバー

画面上部に丸いアバターを並べて投稿へ誘導する。

短期間だけ表示する投稿を目立つ位置に並べ、閲覧を促す。未読のあるアカウントを一目で見分けさせたいときに使う。

実装のポイント横スクロールは overflow-x: auto と scroll-snap で作り、未読はグラデーションのリングで示す。各アイテムはボタンにして名前と未読状態をラベルに含める。

  • CSS のみ
詳細

§08-07

リール / 縦動画フィード

縦スワイプで動画を 1 本ずつ送るフィード。

次に何を見るか選ばずに次々と視聴でき、1 本ずつ画面全体で集中して見られる。短い動画を連続で見せたい場面に向く。

実装のポイント縦フィードは scroll-snap-type: y mandatory で 1 本ずつ止め、IntersectionObserver で画面内の動画だけ再生する。前後 1 本だけ先読みする。

  • CSS のみ
詳細
残り 5 件のパターンライトボックス / ギャラリー / 比較スライダー / zoom / pan viewer …

§08-10

比較スライダー

2 枚の画像を境界を動かして比べる。

加工前後や新旧の違いを同じ位置で見比べる。並べて置くだけでは差が分かりにくい写真やデザインの比較に向く。

実装のポイント上の画像を clip-path や幅で切り取り、内側は元の幅を保つ。操作は input type=range を重ねるとキーボードと支援技術の対応が手に入る。

  • 状態管理
詳細

§08-11

zoom / pan viewer

画像を拡大・移動して細部を確認する。

写真や図面の細部を確認したいときに、別画面に移らず拡大して見られる。商品写真や地図、設計図の閲覧で効く。

実装のポイントtransform: scale と translate を 1 つの行列で持ち、ホイールやピンチの中心点を基準に拡大する。拡大率には上限と下限を設ける。

  • 状態管理
詳細

§08-12

Document outline panel

文書の見出しを一覧にして脇に表示する。

文書の構成を一覧で掴み、読みたい節へすぐ飛べる。執筆中にも全体の流れを見渡せるので、長いドキュメントの編集画面に向く。

実装のポイント見出しから目次を生成し、IntersectionObserver で表示中の見出しを追ってハイライトする。リンクは #id への通常のアンカーにして履歴と共有に対応させる。

  • 状態管理
詳細

§08-13

Reader mode

装飾や広告を除いて本文だけを読みやすく表示する。

長文を集中して読めるようになる。記事中心のサイトや、外部ページを取り込んで表示する機能で読みやすさを担保したいときに使う。

実装のポイント本文の抽出は article や main を起点に、リンク密度の高いブロックを除外して行う。表示側は max-w-prose と行間・フォントサイズの調整だけで読みやすくなる。

  • 状態管理
詳細