丸くした枠線の上の1辺だけ色を変え、@keyframes で rotate(360deg) まで回し続けると、データの読み込み中に出すローディングスピナーになります。linear を書かないと1周ごとに止まりかける理由、span で作 ...

ぼかしのない box-shadow で側面を描き、押している間（:active）だけ transform で下げると、沈むボタンになります。上の端を押すと click が届かないことがある理由と直し方、disabled やキーボードで ...

記事の一覧のように縦に長いページの右下に出す「ページトップへ戻る」ボタンを、React で作る方法です。スクロールした量での表示の切り替え、なめらかなスクロール、動きを減らす設定への対応、押した後のフォーカスの置き場所まで、ブラウザで ...

見出しが枠からはみ出さないように、収まるいちばん大きい文字の大きさを React で測って決める方法です。二分探索で font-size を試し、枠の幅の変化と Web フォントの読み込みに合わせて測り直します。

横に並んだカードをマウスでつかんで動かせるリストを、ライブラリなしの React で作りました。ポインターは動き始めてから捕まえます。ドラッグの後にリンクが開く問題や、リンクのドラッグで止まる問題も確かめました。

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

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

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

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

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