入れ子の深い 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 ...

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

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