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

文字に蛍光ペンのような線を引くには、上60%を透明にした linear-gradient を背景に置きます。行をまたいでも線は続きます。文章の中で注目してほしい部分を、マーカーで線を引いたように目立たせたいときに使えます。折り返しの端 ...

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

枠に overflow: hidden を付け、:hover で画像を transform: scale(1.1) にすると、枠の大きさは変わらず、中の画像だけが大きくなります。overflow を付け忘れたときの重なりや、画像の下の ...

表計算ソフトのように、表のセルをドラッグして四角い範囲で選ぶ仕組みを、ライブラリを使わずに React で作りました。範囲は起点と端の2つのセルで持ちます。Shift と矢印キーでの選択、Ctrl+C でのタブ区切りのコピー、文字の選 ...

打ち合わせや勉強会の予定を、カレンダーの週の表示のように時刻に合わせて置きます。月曜から日曜を列、5分を1行にした CSS Grid に、開始と終了の時刻から求めた grid-row で予定を置き、時間が重なる予定は列を等分して横に並 ...

選んだファイルの SHA-256 などのハッシュ値を、React でブラウザだけで計算して表示します。crypto.subtle.digest の使い方、選び直したときに前の結果で上書きされない書き方、大きいファイルを Worker ...

文字色と背景色を選ぶと、WCAG のコントラスト比と AA・AAA の判定を表示する React のコードです。表示は小数第2位で切り捨て、判定は計算したままの値で行います。カラーコードの入力欄と色の input を、入力途中の文字を ...

センチとインチのように、どの欄に打ってもほかの欄が換算される入力欄を React で作りました。state に持つものを「最後に打った欄と、打ったままの文字列」に絞る理由と、文字列を数にするとき・計算結果を表示するときの注意を確かめて ...

打つたびに「1,234,567」のように3桁区切りで表示される金額の入力欄を、React で作りました。type=”number” を使わない理由、IME で変換中の扱い、フォームで区切りのない数を送る方法を確 ...