ボタンに position: relative を付け、::before を inset: -10px で外にはみ出させると、見た目は 24px のまま、押せる範囲が 44px 四方に広がります。小さなアイコンボタンのタップ領域を、見 ...

「0 9 * * 1-5」のような cron の式から、次に実行される時刻を5件並べる部品を React で作りました。cron-parser での求め方、タイムゾーンの指定、日と曜日を両方書いたときの数え方、夏時間の日の結果も確かめ ...

float した画像に shape-outside を付けると、文章が四角ではなく円や画像の輪郭に沿って回り込みます。circle() と border-radius の組み合わせ、透明な PNG の輪郭を使う url()、余白の付け ...

東京やニューヨークなどの今の時刻を並べ、時差と「前日・翌日」も出す世界時計を React で作りました。Intl.DateTimeFormat の timeZone で時刻を出し、夏時間の切り替わりや30分単位の時差も確かめています。 ...

CSS はいまでは Sass を使わなくても、ルールの中にルールを入れ子にして書けます。基本の書き方と、:hover の前の & の付け忘れ、Sass のようなクラス名の連結、詳細度の違いなど、つまずきやすい点を Chromi ...

選んだ画像ファイルを、FileReader の readAsDataURL() でデータURLにする方法です。元のファイルと同じバイト列に戻ること、canvas の toDataURL() や toBase64() との違いも確かめて ...

CSS の cursor プロパティに pointer や not-allowed などのキーワードを書くと、マウスカーソルの形が変わります。ドラッグ中だけ形を変える書き方と、自分で用意した画像をカーソルにするときの注意を、Chrom ...

英数字・記号・カタカナ・スペースを選んで、全角と半角を相互に変換する入力欄を React で作りました。「ｶﾞ」を1文字の「ガ」にまとめる方法、normalize(‘NFKC’) だけでは変わりすぎる文字、郵便 ...

長いURLや英単語は、overflow-wrap: anywhere を付けると枠の中で折り返せます。break-word や word-break: break-all との違い、flex や表の中で効かない場合の直し方、pre の ...

合計金額と人数を入れると、1人あたりの額を出す割り勘の部品を React で作りました。100円単位で切り上げて全員同じ額にする場合と、端数を幹事が払う場合の2通りを並べ、全角の数字や IME で打ったときの扱いも確かめています。