文字の影は text-shadow で付けます。右下に少しずらしてぼかした半透明の影で、文字がふんわり浮いて見えます。影を重ねて厚みを付ける書き方、光らせる書き方、カーソルを乗せると浮く動き、overflow: hidden で影が切 ...

ダウンロード中にプログレスバーで進み具合を見せたいときに使える方法です。fetch の本文を getReader() で少しずつ読み、受け取った量と Content-Length から進み具合を progress 要素に表示します。C ...

メニューに popover 属性を付けて画面の左端に固定し、transform で画面の外へずらしておくと、ボタンを押したときに端からすべり出ます。スマートフォン向けのページで、ハンバーガーメニューのボタンを押すとリンクの一覧が画面の ...

文章によく出る言葉を、回数が多いほど大きな文字で並べるワードクラウドを、ライブラリを使わずに React で作りました。回数から文字の大きさを決める計算、canvas で文字の幅を測ってうず巻きに沿って重ならないように置く方法、枠に入 ...

見出しを display: flex にして、::before と ::after に flex: 1 と border-top を付けると、文字の左右に、残りの幅いっぱいの線が引けます。線を短くする、片側だけにする、長い見出しが折り ...

プロフィール画像の代わりに、頭文字のアバターを出したいときに使える方法です。画像のないユーザーに、名前の頭文字と背景色で丸いアイコンを出す React のコンポーネントを作りました。絵文字でも崩れない頭文字の取り出し方、名前から毎回同 ...

img の幅と高さを同じにし、object-fit: cover と border-radius: 50% を付けると、横長の画像もゆがまずに丸くなり、border の枠も円に沿います。楕円になるときの直し方、すき間の空け方、グラデー ...

選んだ色にいちばん近い CSS の色の名前（royalblue など）を表示する React のコードです。色を Oklab に直して ΔEOK2 で距離を測ります。RGB の値のまま測る方法と比べると、4096色のうち37%で選ばれ ...

チェックボックスと文字を label で包み、input:checked + span に text-decoration: line-through を書くと、JavaScript なしで、チェックした項目にだけ取り消し線が付きます ...

requestIdleCallbackを使うと、重い計算をブラウザの手が空いたときだけ少しずつ進められます。Reactのフックにまとめる書き方と、timeoutの付け方、二重に走らせない後片付けをChromiumで確かめました。