メニューに 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で確かめました。

body を画面の高さ以上の縦並びの flex にし、main に flex: 1 を付けると、中身が少ないページでもフッターが画面の下に来ます。多いときは本文の後ろに続きます。grid や、div で包んだページでの書き方も確かめま ...

レシピを見ながら料理をするときのように、触らずに見続けるあいだ画面をスリープさせたくないときは、Wake Lock APIが使えます。Reactでオン・オフを切り替えるフックの書き方と、タブを切り替えると解除される動き、StrictM ...