ボタンを押すとカードが裏返り、表と裏が入れ替わるコンポーネントを作りました。2つの面を重ねて外側ごと回す CSS、どの指定が欠けるとどう崩れるか、裏の文章が長いときの高さ、見えていない面を inert にする理由、裏返した後のフォーカ ...

テキストエリアで Tab を押すと字下げし、Shift+Tab で戻す入力欄を React で作りました。複数行をまとめて字下げする計算、Ctrl+Z で戻せる入れ方、Tab でほかの項目へ移れなくなる問題への対処を Chromium ...

テキストエリアの文章を検索して、1件ずつ、またはまとめて置換する部品を React で作りました。setSelectionRange での選び方、selectionchange での件数の追い方、置換後の $& のつまずきを ...

contentEditable の div と B ボタンで、選んだ文字を太字にする入力欄を作る方法です。React に中身を描き直させない書き方、ボタンを押してもフォーカスを入力欄に残す方法、ボタンの押された状態の出し方、書式つきの ...

画像の上の番号付きの点を押すと、その場所の説明が出るコンポーネントを React と TypeScript で作りました。点の位置を % で持つ方法、Esc キーと外側のクリックで閉じる作り、狭い画面で説明をはみ出させない幅の決め方を ...

サイト内検索の欄に localStorage で検索履歴を付け、前回までの検索語を新しい順に候補として出す方法です。候補を押す前に一覧が閉じる問題、消えたボタンからフォーカスが外れる問題、2つのタブで履歴を上書きし合う問題を、Chro ...

左右の一覧でチェックした項目をボタンで移す部品を、React で作る書き方です。左右の配列は state に持たず、右にある項目の id だけを持つと、何度移しても元の並び順が崩れません。絞り込みで隠れた項目を移さない工夫と、移すボタ ...

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

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

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