色だけなら accent-color の1行で変えられます。形から変えるなら appearance: none で見た目を消し、枠と ::before のチェックを描きます。未確定の状態と、強制カラーモードでチェックが消える問題の直し ...

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

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

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

1日を1マスにして、縦に曜日、横に週を並べる「草」のカレンダーを、React と CSS Grid で作りました。マスの位置を日付から求める計算、件数を5段階の濃さに分ける方法、曜日の列を横スクロールで残す CSS、矢印キーでの移動を ...

チェックボックスに role=”switch” を付けて見えなくし、後ろの span に描いたつまみを :checked で動かすと、CSS だけでスイッチになります。キーボードでの操作と、display: n ...

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

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

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

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