React の Suspense の fallback に、読み込み後と同じ形のスケルトンを渡す方法です。帯の高さを文字の行に合わせて下の段落を動かさない作り、文章の行数の決め方、読み上げと動きを減らす設定への配慮を、Chromium ...

文字を1文字ずつ表示するタイプライター風の表示を、React のフックとコンポーネントで作りました。絵文字を途中で割らない分け方、句読点の後の間、下の内容を押し下げない場所の取り方、文章が変わったときのやり直し、読み上げへの配慮を確か ...

セクションの背景だけを、スクロールの半分の速さで動かすパララックスを作りました。背景をはみ出させる量の決め方、ずらす量を state に入れない理由、動きを減らす設定への対応、CSS だけで書く方法を確かめています。

表の見出しの右端の取っ手をドラッグして、列の幅を変えられるようにしました。幅を state に持って col に渡し、table-layout: fixed と表の幅の指定で、そのとおりに描かせます。ダブルクリックで中身に合わせる方法 ...

角度と色の位置をスライダーで、色を色選びの欄で変えながら、CSS の linear-gradient() を作って確かめるツールを React と TypeScript で作りました。CSS の文字列は state から作り、色の位置 ...

textarea の文字の一部だけに色を付けるには、同じ文字を色付きで描いた div を後ろに重ね、textarea の文字を透明にします。#タグと文字数の上限を超えた部分に色を付ける入力欄を React と TypeScript で ...

Reactの画面を、ヘッダーやボタンを消した印刷用のレイアウトで印刷する方法です。@media print と @page でA4の紙に合わせます。入力欄を文字にするやり方、背景色、ページ番号、改ページの扱いも書きます。画面の一部だけ ...

何もない所からドラッグして四角い枠を描き、枠にかかった項目をまとめて選ぶ仕組みを、ライブラリを使わずに React で作りました。項目の位置は押したときに一度だけ測ります。Shift での追加、クリックとの区別、文字が選択されてしまう ...

画像をマウスのホイールで拡大・縮小し、ドラッグで動かせる表示枠を、ライブラリを使わずに React で作りました。カーソルの下の位置を動かさずに拡大する計算と、onWheel では preventDefault が効かずページがスクロ ...

リストの行を指やマウスで左へ引くと削除される仕組みを、ライブラリを使わずに React で作りました。少し引いただけなら元に戻し、縦の動きはページのスクロールに任せます。touch-action の値でタッチ操作がどう変わるかも、Ch ...