枠線が回りながら光るボタンは、@property で角度を登録し、conic-gradient() の向きを @keyframes で回すと作れます。光は同じグラデーションをぼかした疑似要素です。回らない、光が消えるといったつまずきと ...

文字のグラデーションは、背景にグラデーションを敷き、background-clip: text で文字の形に切り抜いて、文字の色を透明にすると作れます。見出しの幅、折り返した行、影の付け方でつまずく点と直し方を、画素の色を測って確かめ ...

「小・中・大」のボタンでページ全体の文字の大きさを切り替える React のコードです。html の font-size を % で変え、ほかの文字は rem で指定します。ボタンは aria-pressed で押されている状態を示し ...

日時の付いた記録を、日付の見出しで区切ったタイムラインにします。日付は toISOString ではなく、タイムゾーンを決めた Intl.DateTimeFormat で取り出します。並べ替えてからまとめる方法と、見出しを上に残す C ...

選んだ画像を 90° ずつ回したり左右・上下に反転したりして、そのままファイルに保存する仕組みを React で作りました。向きの持ち方と canvas での描き方、回したあとに反転したときのずれ、EXIF の向きも確かめています。

時・分・秒の針が動くアナログ時計を、React と SVG で作りました。時刻から針の角度を出す計算、秒の変わり目に合わせて更新する方法、requestAnimationFrame で秒針をなめらかに動かす方法、transition ...

昼ごはんの候補などから抽選で1つ選ぶルーレットを、React と CSS の transition で作りました。当たりから止める角度を計算する方法、回転角を足し続ける理由、transitionend と動きを減らす設定への対応を確か ...

16×16 のマス目をクリックやドラッグで塗るドット絵エディターを React と TypeScript で作りました。ポインターの位置からマスを求める方法、速く動かしても線が途切れない塗り方、塗りつぶし、元に戻す機能、PNG での保 ...

ラベルを左右にドラッグすると数値が増減する入力欄を、React と Pointer Events で作りました。setPointerCapture でラベルの外まで追いかける方法、Shift で10倍にする方法、0.01 刻みの丸め、 ...

React と SVG で描いた折れ線グラフに、カーソルを乗せた月の値を出すツールチップを付けました。ポインターの位置を viewBox の座標に直す方法、いちばん近い点の選び方、グラフの端でツールチップを出す側の切り替え、タッチとキ ...