文字を選択したときの色は、::selection に color と background-color を書いて変えます。片方だけ書くと標準の色が消えること、一部分だけ色を変えるときに ::selection ではなく :root:: ...

長いファイル名を「2026年度_営業会…版_v3.docx」のように、拡張子と末尾の数文字を残して真ん中で省略します。表示幅に合わせて CSS で省く方法と、select の選択肢のように文字数で切る関数の2つを作り、Chromium ...

入力欄の中に虫めがねなどのアイコンを置くには、入力欄とアイコンを包む要素を基準に、アイコンを position: absolute で重ねます。文字と重ならない余白の取り方、アイコンを押しても入力できるようにする pointer-ev ...

入力されたタイトルを、そのまま保存できるファイル名にする関数と、Reactのコンポーネントを作りました。Windowsで使えない文字、予約名、長さの上限、絵文字の扱いと、Chromiumが自分で名前を直す範囲も確かめました。

アイコンの右上に件数の丸いバッジを付けるには、アイコンの箱に position: relative、バッジに position: absolute を付けます。1桁は丸、2桁以上は横長にする書き方、0件で隠す方法、ボタンの名前に件数を ...

ページの中で選んだ文に飛び、その文をハイライトするリンク（#:~:text=）を、Reactで作りました。「-」の書き方、日本語の単語の途中で切れたときの扱い、同じ文が2回あるときの前後の言葉、本文を出すのが1秒以上遅いページで飛ばな ...

写真に白い枠を付けて rotate で少しずつ傾け、負のマージンでとなりと重ねると、机に置いたプリント写真のように並びます。カーソルを乗せた写真を手前に出す方法のほか、rotate: none の写真が下に隠れることや、傾いた角で横ス ...

選んだ画像を canvas の toBlob() で JPEG や WebP に書き出し、ファイルの大きさと PSNR を React で並べて比べます。書き出せない形式が PNG になる点や、透明な部分の扱いも確かめました。 ...

背景のストライプは repeating-linear-gradient()、水玉は radial-gradient() と background-size で、画像なしで描けます。縞をタイルで描くときの分け方や、ふちのギザギザの消し方 ...

ブラウザに入っているCompressionStreamで、入力した文章や選んだファイルをgzipにして保存するReactのコンポーネントを作りました。TypeScriptの型エラーの避け方、圧縮率、進み具合の表示、保存されたファイルの ...