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

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

見出しから、見出しの id や記事の URL に使うスラッグを作る関数と、React の目次・入力欄での使い方です。日本語の見出しの扱い、濁点が消える落とし穴、同じ見出しの番号付け、URL の # で開いたときにスクロールしない問題を ...

2枚の画像を1画素ずつ比べ、違う画素をピンクで塗った画像を React で表示しました。差を見逃さないためのしきい値の決め方と、JPEG と比べると変えていない部分まで違う画素になることも、画素を数えて確かめています。

Intl.DisplayNamesを使うと、「JP」「US」のような国のコードや「en-US」のような言語のコードを、「日本」「アメリカ英語」のような名前にできます。Reactで国の選択肢や言語の切り替えボタンに使う書き方と、名前のな ...

一定の時間押し続けたときだけ実行するボタンを、ライブラリを使わずに React で作りました。押し始めにタイマーを始め、離したとき、ボタンの外へずらしたとき、スクロールで取り消されたときに止めます。キーボードの自動リピートで何度も実行 ...

Intl.ListFormatを使うと、配列を「りんご、みかん、ぶどう」や「Apple, Orange, and Grape」のように、言語に合った区切りで並べられます。Reactでの使い回し方、JSXを並べる方法、0件のときの結果を ...

ブラウザの EyeDropper API を使い、画面の好きな場所の色をスポイトで取る部品を React で作りました。開けるのはクリックの直後だけであること、取り消し方、値が rgba() で返る場合、使えないブラウザで代わりに色の ...

打ったローマ字をその場でひらがなに変える入力欄を、ライブラリを使わずに React で作りました。「ん」と「っ」の決め方、打ちかけの文字の残し方、途中に打ったときにカーソルが末尾へ飛ぶ問題の直し方を確かめています。

入力した文章を1文ずつに分けて文字数を数え、決めた文字数を超える文だけに色を付ける部品を React で作りました。Intl.Segmenter の文の区切りがかぎかっこで思わぬ位置になること、自分で区切るときの決め方、長い文章での速 ...