リストの先頭の黒丸は、list-style-type で四角や好きな文字に変えられます。色と大きさだけなら ::marker、①②③のような連番なら @counter-style を使います。記号の位置の違いも確かめました。互換性デー ...

2026 を MMXXVI に、MCMXCIX を 1999 に変える関数と、打つたびに結果が出る入力欄を React で作りました。IIII のような正しくない並びの見分け方、1文字の「Ⅻ」の読み方、Intl.NumberForma ...

文字の影は text-shadow で付けます。右下に少しずらしてぼかした半透明の影で、文字がふんわり浮いて見えます。影を重ねて厚みを付ける書き方、光らせる書き方、カーソルを乗せると浮く動き、overflow: hidden で影が切 ...

ダウンロード中にプログレスバーで進み具合を見せたいときに使える方法です。fetch の本文を getReader() で少しずつ読み、受け取った量と Content-Length から進み具合を progress 要素に表示します。C ...

メニューに popover 属性を付けて画面の左端に固定し、transform で画面の外へずらしておくと、ボタンを押したときに端からすべり出ます。スマートフォン向けのページで、ハンバーガーメニューのボタンを押すとリンクの一覧が画面の ...

文章によく出る言葉を、回数が多いほど大きな文字で並べるワードクラウドを、ライブラリを使わずに React で作りました。回数から文字の大きさを決める計算、canvas で文字の幅を測ってうず巻きに沿って重ならないように置く方法、枠に入 ...

見出しを display: flex にして、::before と ::after に flex: 1 と border-top を付けると、文字の左右に、残りの幅いっぱいの線が引けます。線を短くする、片側だけにする、長い見出しが折り ...

プロフィール画像の代わりに、頭文字のアバターを出したいときに使える方法です。画像のないユーザーに、名前の頭文字と背景色で丸いアイコンを出す React のコンポーネントを作りました。絵文字でも崩れない頭文字の取り出し方、名前から毎回同 ...

img の幅と高さを同じにし、object-fit: cover と border-radius: 50% を付けると、横長の画像もゆがまずに丸くなり、border の枠も円に沿います。楕円になるときの直し方、すき間の空け方、グラデー ...

チェックボックスと文字を label で包み、input:checked + span に text-decoration: line-through を書くと、JavaScript なしで、チェックした項目にだけ取り消し線が付きます ...