select の矢印を変えるには、appearance: none で既定の矢印を消し、背景の SVG か ::after で描きます。フォームのセレクトボックスを、プルダウンの矢印までサイトのデザインに合わせたいときに使える方法です ...

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

画像や横スクロールの一覧の端をだんだん透明にするには、mask-image に黒から透明へのグラデーションを指定します。後ろの背景が透けるので、模様の上でも使えます。4辺を消す重ね方や、続きがある側だけを消す書き方も試しました。

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

文字の上に「﹅」の傍点を付けるには、CSS の text-emphasis に sesame を指定します。形を省くと点が小さくなること、句読点に付かないこと、行の間隔、縦書きやルビとの組み合わせを、Chromium で測って確かめま ...

選んだ画像に文字を重ねて、そのまま PNG で保存する仕組みを React で作りました。canvas に文字を描く設定、縁取りの描き方、長い文の折り返し、Webフォントを読み込み終わってから描く理由を、検証環境で確かめています。

ボタンの色をカスタムプロパティ1つに決め、ホバー・押している間・無効の色は color-mix() で黒や白を混ぜて作ります。混ぜる色空間の違い、無効の色の作り方、継承と書く順番でつまずく点も確かめました。

見出しとセルを入力欄に入れると、その場で Markdown の表ができる React のコンポーネントを作りました。列の寄せ方、行と列の追加と削除、セルの中の | の書き方、コピーのボタンまで、4つの Markdown の実装と Ch ...

margin-inline や padding-block などの論理プロパティは、left・right の代わりに「行の始まり・終わり」で余白や線を指定します。右から左に書く言語や縦書きで、どの辺に変わるかを Chromium で測 ...

選んだファイルが本当に PNG や JPEG なのかを、React でファイルの先頭の数バイトを読んで調べます。拡張子から決まる file.type との違い、PNG・JPEG・GIF・WebP・BMP・AVIF の見分け方、先頭だけ ...