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

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

React と SVG の path だけで、ドーナツグラフを描きました。値を角度に直す計算、輪を切り取る d 属性、半周を超える扇形と100%の扇形が崩れる理由と直し方、クリックで項目を選ぶ方法を、Chromium で確かめています ...

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

clip-path に circle() や polygon() を指定すると、画像を円や六角形に切り抜けます。横長の画像で円が欠ける理由、影の付け方、切り抜いた外側のクリック、形を変えるアニメーションの条件も確かめました。

角を丸めた箱に、幅と高さが 0 の ::after を重ね、border の1辺だけに色を付けると、吹き出しのしっぽになります。枠線のある吹き出しの作り方と、overflow: hidden や影でしっぽが消える・欠ける理由も確かめま ...

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

半透明の背景色に backdrop-filter: blur() を組み合わせると、すりガラス風の背景になります。不透明だと効かないこと、blur の値の決め方、入れ子のすりガラスがぼけない理由と直し方を、画素を測って確かめました。

親を display: grid にして place-items: center を付け、min-height: 100dvh で画面の高さまで広げると、要素は画面の真ん中に来ます。中身が画面より高いときに上の端が切れる場合の直し方も ...

リンクの下線を ::after で描き、scaleX(0) から scaleX(1) へ変えて transform-origin を left にすると、左から伸びます。右へ抜けさせる書き方や、2行に折り返すリンクでの直し方も確かめま ...