Daily Code / JavaScript・ブラウザ標準API

ResizeObserverでカードの幅を観察しよう

このデモについて

枠の幅が変わると、カードの並び方と「実測幅」の表示が切り替わります。外部ライブラリ、ログイン、個人情報、APIキーは不要です。

まず試す

  1. 「300px」を押して縦並びを確認する。
  2. 「520px」を押して横並びと実測値の変化を見る。
  3. 「観察停止」を押してから幅を変え、表示が更新されないことを比べる。
架空のタスクカード進捗 2 / 3（ダミー）

観察の開始を待っています…

画面が狭い場合は、指定520pxでも実際の幅はそれより小さくなります。実測値を優先してください。

なぜ変わる？

ResizeObserverは監視対象の要素のサイズ変化を通知します。ここではcontent boxの幅を読み、360px未満なら縦並び、以上なら横並びにします。ウィンドウ全体の幅ではありません。

MDN: ResizeObserver