Reactで、画像の色数を減らしてポスターのようにする方法
画像の R・G・B をそれぞれ数段階にそろえ、色の数を減らしたポスターのような画像を React で表示して PNG で保存しました。SVG のフィルターで表示だけを変える書き方と、color-interpolation-filter ...
CSSのimage-set()で解像度に合う画像を出し分ける方法
CSS の背景画像を image-set() で書くと、倍率2の画面には2倍の大きさの画像、通常の画面には普通の画像をブラウザーが選んで読み込みます。書き方、倍率ごとに選ばれた画像、表示される大きさ、type() で形式を選ぶ方法を確 ...
CSSで、日本語のかっこや句読点の詰め方を整える方法
CSS の text-spacing-trim で、かっこや句読点の空きを整えられます。Chrome と Edge では、隣り合うかっこは何も書かなくても詰まります。行頭も詰める指定や、フォントによって効かない場合も確かめました。
CSSのtext-box-trimで、文字の上下の余白を削る方法
CSS の text-box-trim と text-box-edge を使うと、文字の上下にできる余白を、大文字の上端やベースラインの位置まで削れます。ボタンの文字を上下の中央に置く例や、日本語の文字で気をつけることを Chromi ...
CSSで、キーボード操作のときのフォーカス枠を見やすくする方法
:focus-visible に outline を書くと、Tab キーで選んだときだけ太い枠が出て、ボタンをマウスで押したときには出ません。暗い背景でも見える2色の枠、強制カラーモードで消えない書き方、枠が切れるときの直し方も確かめ ...
CSSの@scopeで、スタイルが効く範囲を限る方法
CSS の @scope を使うと、指定した要素の中だけにスタイルを効かせ、to で決めた要素から先は外せます。入れ子のテーマで近いほうが勝つ仕組みや、詳細度の数え方も Chromium で確かめました。
CSSの:user-invalidで、間違えた欄だけ目立たせる方法
:invalid だと、開いた時点で必須の欄が赤くなります。:user-invalid に変えると、入力して欄を離れたときや送信しようとしたときに、間違っている欄だけが赤くなります。赤くなるタイミングも Chromium で確かめまし ...
CSSの@layerで、スタイルの優先順位を整理する方法
CSS の @layer を使うと、詳細度ではなく、先に決めたレイヤーの順番でスタイルの勝ち負けが決まります。順番の宣言、レイヤーの外のスタイル、@import、!important での逆転を Chromium で確かめました。
CSSで、リストの先頭の記号を変える方法
リストの先頭の黒丸は、list-style-type で四角や好きな文字に変えられます。色と大きさだけなら ::marker、①②③のような連番なら @counter-style を使います。記号の位置の違いも確かめました。互換性デー ...
Reactで、数字をローマ数字に変換する方法
2026 を MMXXVI に、MCMXCIX を 1999 に変える関数と、打つたびに結果が出る入力欄を React で作りました。IIII のような正しくない並びの見分け方、1文字の「Ⅻ」の読み方、Intl.NumberForma ...
CSSのtext-shadowで、文字を浮き上がらせる方法
文字の影は text-shadow で付けます。右下に少しずらしてぼかした半透明の影で、文字がふんわり浮いて見えます。影を重ねて厚みを付ける書き方、光らせる書き方、カーソルを乗せると浮く動き、overflow: hidden で影が切 ...
Reactで、ファイルのダウンロードの進み具合を表示する方法
ダウンロード中にプログレスバーで進み具合を見せたいときに使える方法です。fetch の本文を getReader() で少しずつ読み、受け取った量と Content-Length から進み具合を progress 要素に表示します。C ...
CSSとpopover属性で、画面の端からメニューを出す方法
メニューに popover 属性を付けて画面の左端に固定し、transform で画面の外へずらしておくと、ボタンを押したときに端からすべり出ます。スマートフォン向けのページで、ハンバーガーメニューのボタンを押すとリンクの一覧が画面の ...
Reactで、文章によく出る言葉をワードクラウドで表示する方法
文章によく出る言葉を、回数が多いほど大きな文字で並べるワードクラウドを、ライブラリを使わずに React で作りました。回数から文字の大きさを決める計算、canvas で文字の幅を測ってうず巻きに沿って重ならないように置く方法、枠に入 ...
CSSで、見出しの左右に線を引く方法
見出しを display: flex にして、::before と ::after に flex: 1 と border-top を付けると、文字の左右に、残りの幅いっぱいの線が引けます。線を短くする、片側だけにする、長い見出しが折り ...
Reactで、名前から頭文字と色を決めたアイコンを表示する方法
プロフィール画像の代わりに、頭文字のアバターを出したいときに使える方法です。画像のないユーザーに、名前の頭文字と背景色で丸いアイコンを出す React のコンポーネントを作りました。絵文字でも崩れない頭文字の取り出し方、名前から毎回同 ...
CSSで、画像を丸く切り抜いて枠を付ける方法
img の幅と高さを同じにし、object-fit: cover と border-radius: 50% を付けると、横長の画像もゆがまずに丸くなり、border の枠も円に沿います。楕円になるときの直し方、すき間の空け方、グラデー ...
Reactで、選んだ色に近いCSSの色の名前を表示する方法
選んだ色にいちばん近い CSS の色の名前（royalblue など）を表示する React のコードです。色を Oklab に直して ΔEOK2 で距離を測ります。RGB の値のまま測る方法と比べると、4096色のうち37%で選ばれ ...
CSSだけで、チェックすると取り消し線が付くやることリストを作る方法
チェックボックスと文字を label で包み、input:checked + span に text-decoration: line-through を書くと、JavaScript なしで、チェックした項目にだけ取り消し線が付きます ...
Reactで重い計算をブラウザの空き時間に少しずつ進める方法
requestIdleCallbackを使うと、重い計算をブラウザの手が空いたときだけ少しずつ進められます。Reactのフックにまとめる書き方と、timeoutの付け方、二重に走らせない後片付けをChromiumで確かめました。
CSSで、中身が少なくてもフッターを画面の下に置く方法
body を画面の高さ以上の縦並びの flex にし、main に flex: 1 を付けると、中身が少ないページでもフッターが画面の下に来ます。多いときは本文の後ろに続きます。grid や、div で包んだページでの書き方も確かめま ...
ReactとWake Lock APIで画面を暗くさせない方法
レシピを見ながら料理をするときのように、触らずに見続けるあいだ画面をスリープさせたくないときは、Wake Lock APIが使えます。Reactでオン・オフを切り替えるフックの書き方と、タブを切り替えると解除される動き、StrictM ...
Reactで、見出しからURL用のスラッグを作る方法
見出しから、見出しの id や記事の URL に使うスラッグを作る関数と、React の目次・入力欄での使い方です。日本語の見出しの扱い、濁点が消える落とし穴、同じ見出しの番号付け、URL の # で開いたときにスクロールしない問題を ...
ReactのstateをstructuredCloneでコピーする方法
React の state を structuredClone で丸ごとコピーしてから書き換える方法と、その注意点をまとめました。関数やクラスのインスタンスを含む state で起きることと、memo した子がすべて再描画されることを ...
Reactで、2枚の画像の違う部分を色で示す方法
2枚の画像を1画素ずつ比べ、違う画素をピンクで塗った画像を React で表示しました。差を見逃さないためのしきい値の決め方と、JPEG と比べると変えていない部分まで違う画素になることも、画素を数えて確かめています。
ReactとIntl.DisplayNamesで国名や言語名を表示する方法
Intl.DisplayNamesを使うと、「JP」「US」のような国のコードや「en-US」のような言語のコードを、「日本」「アメリカ英語」のような名前にできます。Reactで国の選択肢や言語の切り替えボタンに使う書き方と、名前のな ...
Reactで、長押しで実行するボタンを作る方法
一定の時間押し続けたときだけ実行するボタンを、ライブラリを使わずに React で作りました。押し始めにタイマーを始め、離したとき、ボタンの外へずらしたとき、スクロールで取り消されたときに止めます。キーボードの自動リピートで何度も実行 ...
ReactとIntl.ListFormatで項目を並べる方法
Intl.ListFormatを使うと、配列を「りんご、みかん、ぶどう」や「Apple, Orange, and Grape」のように、言語に合った区切りで並べられます。Reactでの使い回し方、JSXを並べる方法、0件のときの結果を ...
Reactで、画面を録画してダウンロードする方法
ブラウザの getDisplayMedia() で画面を共有してもらい、MediaRecorder で録画して、ダウンロードのリンクを出す部品を React で作りました。録画の形式の選び方、ブラウザの「共有を停止」で止められたときの ...
CSSで、数値の入力欄の上下ボタンを消す方法
数値の入力欄の上下ボタンは、::-webkit-inner-spin-button に -webkit-appearance: none を書くと消えます。個数や金額のような数値を入れる欄で、スピンボタンとも呼ばれるこの上下ボタンを見 ...