選んだ画像を canvas に描いて画素を取り出し、jsQR に渡して QR コードを読む React のコンポーネントです。背景が透明な PNG、白黒が反対の QR コード、大きな画像、Shift_JIS の文字、QR コードが2つ ...

CSS で文章を縦書きにするには writing-mode: vertical-rl を指定し、height で1行の長さを決めます。英字を立てる text-orientation、2桁の数字を横に並べる text-combine-u ...

ひらがなとカタカナを互いに変換する関数と、ボタンで変換する入力欄、欄を離れたときにカタカナにそろえるフリガナの欄を React で作りました。「ヷ」や「ゝ」の扱い、半角カナ、wanakana との違い、ひらがなとカタカナを区別しない検 ...

引用文の左上と右下に大きなかぎかっこを付けるには、blockquote の ::before と ::after にかぎかっこの字を入れて絶対配置します。字の余白でかっこが内側に寄る理由と直し方、線で描く方法、読み上げとコピーでの扱い ...

camelCase、PascalCase、snake_case、CONSTANT_CASE、kebab-case を互いに変換する関数と、入力した名前を5つの書き方で並べてコピーできるコンポーネントを React で作りました。XML ...

横にスクロールする枠の背景に、端に止まる影と、中身といっしょに動く白いふたを重ねると、続きがある側にだけ影が出ます。JavaScript は使いません。中身に背景色があると影が隠れるので、スクロール位置で動くアニメーションで疑似要素に ...

貼り付けた一覧から重複した行を取り除くコンポーネントを React で作りました。new Set だけでは別の行として残る改行コード・前後の空白・全角と半角・大文字と小文字の違いを、比べるときだけそろえる方法と、10万行を貼り付けたと ...

点線や波線の下線は、text-decoration に underline と dotted や wavy を並べて書くだけで引けます。線の色や太さの変え方、英字の下で波線が途切れるときの直し方、Safari 26.1 以前でも効く書 ...

YAML と JSON の欄を行き来して変換する React コンポーネントを、yaml パッケージで作りました。no や on が別の値になる問題、マージキー、エイリアスの展開の上限、.inf の扱いを確かめた結果を載せています。

ボタンの ::before に白い帯のグラデーションを描き、マウスを乗せたときに transform で左の外から右の外まで動かすと、光が流れる反射になります。overflow と position が要る理由、外したときに光が逆戻り ...