画面の上に残るヘッダーを CSS の position: sticky で作り、上に着いたときだけ影を付ける処理を React と IntersectionObserver で書きました。固定されないときに見直す3つの点も、検証環境で ...

星をクリックして1〜5の評価を選ぶ入力欄を、React と radio ボタンで作りました。マウスを乗せたときの見え方、矢印キーでの操作、フォームで送られる値、必須にしたときの動きを、検証環境で確かめています。

指でめくると1枚ずつ止まる画像のカルーセルを、React と CSS Scroll Snap で作りました。前へ・次へのボタン、何枚目かの表示、ページが縦に動かないめくり方、画面の幅が変わったときの動きを、検証環境で確かめています。

details と summary でアコーディオンを作ると、開閉とキーボード操作はブラウザに任せられます。React の state で開閉を持つときに onToggle が要る理由、name 属性で1つだけ開く作り、三角の消し方と ...

サイドバーと本文のあいだの取っ手をドラッグして、幅を変えられるようにする部品を React と TypeScript で作りました。setPointerCapture、文字の選択とタッチの対策、キーボード操作、幅の保存を順に確かめてい ...

画面の端にあるボタンのツールチップが切れないように、位置を計算するフックを TypeScript で作りました。上に入らなければ下に回し、左右は画面の内側にずらし、矢印はボタンを指したままにします。Floating UI と CSS ...

ReactでPopover APIを使い、ボタンの下にメニューを出す方法です。ドロップダウンメニューを作るときに使えます。popoverとpopoverTargetを付けるだけで開閉でき、外側のクリックやEscで閉じます。項目を選んだ ...

React 19.3のViewTransitionで、一覧と詳細の切り替えに動きを付ける方法です。startTransitionの中で切り替えるとクロスフェードし、addTransitionTypeで進む・戻るの向きを変えたスライドに ...

同じReactのコンポーネントを、広い列では横並びに、狭い場所では縦並びにする方法です。レスポンシブなページで、同じ部品を幅の違う場所に置きたいときに使えます。置き場所の要素にcontainer-typeを付け、@containerで ...

createPortalを使うと、コンポーネントの中で開いたモーダルを、DOMの上ではdocument.bodyの直下に描画できます。親のCSSでダイアログが切れる例と、ポータルの中のクリックが親に届き、親のコンテキストがポータルの中 ...