三本線のうち上下の線を真ん中まで動かして45度ずつ回し、真ん中の線を消すと×になります。transform の関数の順番を逆にすると×がずれる理由や、開閉の状態を aria-expanded で伝える書き方も確かめました。

:hover のときに transform でカードを数px上げ、box-shadow の影を広げると、浮き上がって見えます。下の端でマウスを動かすと上下に揺れる理由と直し方、キーボードやタッチ、動きを減らす設定への合わせ方も確かめま ...

丸くした枠線の上の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 での件数の追い方、置換後の $& のつまずきを ...