React の Suspense の fallback に、読み込み後と同じ形のスケルトンを渡す方法です。帯の高さを文字の行に合わせて下の段落を動かさない作り、文章の行数の決め方、読み上げと動きを減らす設定への配慮を、Chromium ...

1日を1列にした CSS Grid に、開始日と終了日から求めた grid-column で予定の横棒を置きました。日付は Date.UTC で日数に直し、表示期間からはみ出す棒は切り落とします。作業名の列を sticky で残す方法 ...

項目からさらにメニューが開く、入れ子のドロップダウンメニューを React で作りました。開いている枝を id の配列1つで持ち、同じ描画関数を再帰で呼びます。斜めにポインターを動かしたときの誤作動の防ぎ方と、矢印キーでの操作も確かめ ...

React Routerのデータモードで、ルートのhandleに項目名を書き、useMatchesで集めてパンくずリストを作りました。loaderのデータを項目名に使う方法、indexルートとの関係、移動中とエラーのときの表示、区切り ...

時刻を選ぶ入力欄を、input type=”time” と React の state で作りました。15分単位にする step、日付をまたぐ min と max、表示と value の形の違い、ピッカーに s ...

Ctrl+K で開き、言葉を打って絞り込み、↑↓と Enter で実行するコマンドパレットを、React と dialog 要素で作りました。ひらがなとカタカナを区別しない絞り込みと、実行と閉じる順番によるフォーカスの違いを確かめてい ...

文字を1文字ずつ表示するタイプライター風の表示を、React のフックとコンポーネントで作りました。絵文字を途中で割らない分け方、句読点の後の間、下の内容を押し下げない場所の取り方、文章が変わったときのやり直し、読み上げへの配慮を確か ...

0 から目標の値まで、数字を数え上げて表示するコンポーネントを作りました。経過時間から表示する値を計算するフック、数字の幅をそろえて横揺れを防ぐ CSS、画面に入ってから数え始める作り、途中で値が変わったときの動き、読み上げへの配慮を ...

セクションの背景だけを、スクロールの半分の速さで動かすパララックスを作りました。背景をはみ出させる量の決め方、ずらす量を state に入れない理由、動きを減らす設定への対応、CSS だけで書く方法を確かめています。

HTML で置いた2つの箱を、上に重ねた SVG の曲線と矢印でつなぎました。箱の位置を SVG の左上からの座標に直して描き、箱が動いたときと大きさが変わったときに測り直します。矢印の id を useId で作る理由も確かめました ...