グラフのライブラリを入れずに、React と SVG だけで棒グラフを描きました。値を座標に変える計算、きりのよい目盛り、画面の幅に合わせる方法、データを切り替えたときに棒を伸び縮みさせる方法を、Chromium で測った値とともに紹 ...

行数に合わせて高さが伸び、上限を超えたら中でスクロールするテキストエリアを React で作りました。CSS の field-sizing: content に高さを任せ、使えないブラウザでは scrollHeight を測ります。

要素が画面に入ったら、透明な状態から、少し下の位置からせり上がるように表示するフックを作りました。ページを読み進めるにつれて、カードなどを1つずつフェードインさせたいときに使えます。一度表示したら消さない作り方、横に並んだ要素を順に出 ...

お知らせの文字を右から左へ流し続ける React のコンポーネントです。同じリストを2つ並べて CSS アニメーションで半分だけ動かし、つなぎ目をなくします。一時停止ボタン、キーボード操作、動きを減らす設定への対応も入れています。

高さの違うカードを、列の中ですき間なく並べる表示を、ライブラリを使わずに React で作りました。画像入りのカードの一覧を、メイソンリーと呼ばれる並べ方で見せたいときに使えます。カードをいちばん短い列の下へ置いていく計算と、Resi ...

一覧の画像を押すと、画面いっぱいに大きく表示するライトボックスを、ライブラリを使わずに React と dialog 要素で作りました。画面に収める CSS、矢印キーでの送り、前の画像を残さない key の使い方、先読み、閉じたあとの ...

記事をどこまで読んだかを画面の上のバーで示すフックを、React で作りました。割合はページ全体ではなく記事の要素から計算し、画像の読み込みで記事の高さが変わったときも ResizeObserver で計算し直します。CSS だけで作 ...

加工前と加工後のような2枚の画像を重ね、つまみを左右に動かして見比べる表示を、ライブラリを使わずに React で作りました。ビフォーアフターを1つの枠で見せたいときに使えます。clip-path で隠す理由、キーボードでの操作、po ...

長い文章を3行で切って「続きを読む」ボタンで広げるコンポーネントを TypeScript で作りました。行数で切る CSS、はみ出したときだけボタンを出す測り方、隠れた部分のリンクに Tab で入ったときの対策を Chromium で ...

価格の下限と上限を2つのつまみで選ぶスライダーを、input type=”range” を2つ重ねて React で作りました。つまみだけがクリックを受ける CSS と、重なったつまみが動かせなくなる問題の直し ...