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行に折り返すリンクでの直し方も確かめま ...

ハンバーガーメニューを開いている間、三本線のボタンを×にするには、上下の線を真ん中まで動かして45度ずつ回し、真ん中の線を消します。transform の関数の順番を逆にすると×がずれる理由や、開閉の状態を aria-expanded ...

:hover のときに transform でカードを数px上げ、box-shadow の影を広げると、浮き上がって見えます。下の端でマウスを動かすと上下に揺れる理由と直し方、キーボードやタッチ、動きを減らす設定への合わせ方も確かめま ...