dialog を showModal() で開き、::backdrop に半透明の背景色と backdrop-filter の blur() を指定すると、後ろのページが暗くぼやけます。効き方を画素の明るさで測り、開け閉めのフェードも ...

2つの日付の間の営業日と、「何営業日後」の日付を出すコンポーネントを React で作りました。祝日は npm の @holiday-jp/holiday_jp の一覧を使い、日付を文字列のまま照らし合わせて、タイムゾーンによるずれを ...

ボタンと吹き出しを1つの要素で包み、:hover で visibility と opacity を切り替えると、マウスを乗せたときだけ説明が出ます。出るまでの待ち時間、吹き出しへのマウスの移し方、キーボードと Esc キー、読み上げ用 ...

「2026」と打てば「令和8年」、「R8」や「令和８年」と打てば「2026年」と出る入力欄を React で作りました。元号の表の持ち方、年の途中で元号が変わる年の出し方、全角や「㋿」の扱いを、Intl の和暦表示と照らし合わせて確か ...

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

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

購入手続きなどの「今どの手順にいるか」を示すステップ表示を、ol と CSS で作ります。番号はカウンター、つなぐ線は疑似要素で描き、済んだステップは :has() で選ぶので、JavaScript は aria-current を付 ...

押すと波紋が広がるボタンは、::after の円をふだんは大きく透明にしておき、:active の間だけ大きさ0にすると CSS で作れます。押した位置から広げる方法と、波紋が途中で消える、外にはみ出すときの直し方も確かめました。

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

投稿の日時を「3分前」「昨日」のように出すコンポーネントを TypeScript で作りました。言葉は Intl.RelativeTimeFormat に任せ、単位の選び方、「昨日」の数え方、表示の自動更新は Chromium で確か ...