親に position: relative、再生ボタンに position: absolute; inset: 0; margin: auto を付けて真ん中に重ねます。三角の位置の合わせ方と、video の上で hidden が効か ...

URLを貼ると、ホストやパスに分け、クエリを名前と値の表で直せる部品をReactで作りました。状態をURLの文字列1つにする作り方と、書き戻したときに「+」や「%20」などの書き方が変わる点を、ブラウザで確かめています。

ボタンに 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’) だけでは変わりすぎる文字、郵便 ...