方眼紙のようなマス目は、縦線と横線の linear-gradient を2枚重ね、background-size でマスの大きさを決めると描けます。5マスごとの濃い線、端を線で閉じる方法、線がにじむときの直し方、入力欄で線と文字をそろ ...

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

ページをどこまで読んだかを示す上のバーは、CSS の animation-timeline: scroll() だけで作れます。短いページでバーが伸びきる点の防ぎ方と、枠の中のスクロールに合わせる書き方も確かめました。

長い文章を「1つあたり何字まで」と決めて分け、1つずつコピーできるコンポーネントを React で作りました。Intl.Segmenter で文字数を数える方法、文の切れ目で分ける方法とかぎかっこの扱い、番号を付けても上限に収まる分け ...

画像に filter: grayscale(100%) を付けて白黒にし、:hover のときに grayscale(0%) に戻すと、マウスを乗せた画像だけがカラーになります。transition で色が戻る途中の値、ほかのフィルタ ...

入力欄に打った文章を、20字×20行の原稿用紙のマス目に1字ずつ並べるコンポーネントを React で作りました。Intl.Segmenter で1字ずつに分ける方法、縦書きと横書きを同じ CSS で切り替える書き方、長い文章でも入力 ...

文字の縁取りは -webkit-text-stroke で付けられます。ただし線は輪郭の内側にも描かれ、太くすると文字が細ります。paint-order: stroke fill で線を文字の後ろに回す書き方と、text-shadow ...

選んだ複数の画像を横・縦・格子に並べ、1枚の PNG にして保存する仕組みを React で作りました。大きさの違う画像のそろえ方、正方形への切り抜き、書き出せる大きさの上限、並べ替えで ImageBitmap を解放してしまう落とし ...

タブの数だけラジオボタンを置き、label をタブの見た目にして、:has() と :checked で選ばれたパネルだけを出すと、JavaScript なしでタブが切り替わります。矢印キーでの操作、ラジオボタンの隠し方、:targe ...

2つの JSON を読み込み、追加・削除・変更された項目について「toys.name」のような場所と変更前・変更後の値を、表に並べて見せるコンポーネントを、ライブラリなしの React で作りました。配列を id で対応させる方法や、 ...