選んだ画像に文字を重ねて、そのまま 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 の見分け方、先頭だけ ...

スクロールバーが出ると、中央寄せの中身がその幅の分だけ左へずれます。html に scrollbar-gutter: stable を指定して幅を空けておく方法と、overflow-y: scroll や both-edges との違 ...

印刷するときだけ使うスタイルは、@media print か、media=”print” を付けた link で読み込む CSS に書きます。メニューを消し、カードを2列にし、日ごとに改ページする例を、Chro ...

CSS の column-count や column-width で、文章を新聞のように複数の段に流す方法です。スマホで段が細くなりすぎない指定、段の間の線、段にまたがる見出し、引用を段の境目で割らない指定を Chromium で確 ...

スクロールバーの色は scrollbar-color、太さは scrollbar-width で変えられます。つまみを丸くするなら ::-webkit-scrollbar を使いますが、標準の2つのプロパティを指定した要素では無視され ...

日本語の段落の右端をそろえるには、text-align: justify を指定します。英数字が混ざった行で間隔がどう広がるか、text-justify の値による違い、最後の行や項目名の均等割り付けに使う text-align-la ...