2つの日付から、間の日数、「何か月何日」、土日を除いた日数を出す部品を React で作りました。Temporal.PlainDate の until() で数え、Temporal のないブラウザ向けの書き方や、月末をまたぐときの数え ...

正規表現とフラグを入力すると、一致した部分の強調とキャプチャグループの一覧がその場で出る入力欄を、React で作りました。書き間違いのエラー表示、長さ 0 の一致の扱い、時間のかかるパターンで固まらないように Worker で止める ...

入れ子の深い JSON を、オブジェクトや配列ごとに開いたり閉じたりできる表示を、ライブラリなしの React で作りました。開いている場所をパスの Set で持つ方法、パスを「.」でつなぐと起きる取り違え、JSON.parse のエ ...

マウスでもパソコンのキーでも弾ける1オクターブの鍵盤を、音声ファイルなしで React と Web Audio API で作ります。音の終わりで波形が途切れない止め方と、押しっぱなしや鍵盤の外で離したときに音が鳴りやまない原因も確かめ ...

OS のダークモードに合わせて色を変えるには、色をカスタムプロパティにまとめ、prefers-color-scheme のメディアクエリで値を入れ替えます。color-scheme、light-dark()、テーマを選ぶボタンも確かめ ...

縦に長い表をスクロールしても見出しの行が上に残るようにするには、表を高さの決まった枠に入れ、見出しのセルに position: sticky と top: 0 を付けます。左の列も固定する書き方と、線が消える・文字が重なるときの直し方 ...

入力欄に重ねたラベルを、フォーカスしたときと文字が入っているときに上へ小さく動かす方法です。入力したあとも何の欄かが分かる「フローティングラベル」を、CSS だけで作りたいときに使えます。placeholder に空白を1つ入れて : ...

details の中身を包む ::details-content の高さを、0 から auto へ transition で動かすと、アコーディオンがなめらかに開閉します。閉じるときの指定や、details を使わない書き方も Chr ...

横に並べたカードを、スクロールしたときにカードの左端でぴたっと止めるには、CSS の scroll-snap を使います。カルーセルやスライダーと呼ばれる、カードを横に送って見せる部品を作るとき、どのカードも同じ位置で止めたい場面で使 ...

画像の上の白い文字は、文字の下だけをグラデーションで暗くするか、半透明の箱を敷くと読みやすくなります。ページの先頭に大きく置く画像、いわゆるメインビジュアルやヒーロー画像に、見出しと短い説明を重ねたい場面で使えます。text-shad ...