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 で作りました。手元にある何枚かの画像を、1枚のコラージュ画像にまとめて保存したい場面で使えます。大きさの違う画像のそろえ方、正方形への切り抜き、 ...

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

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

ボタンと吹き出しを1つの要素で包み、:hover で visibility と opacity を切り替えると、マウスを乗せたときだけ説明が出ます。出るまでの待ち時間、吹き出しへのマウスの移し方、キーボードと Esc キー、読み上げ用 ...