お手本の文を1文字ずつ打ち、まちがえた文字をピンクで示し、最後に時間と正確率を出すタイピング練習の画面を React で作りました。2文字目から進まない、Shift をミスに数える、Space でボタンが押される書き方とも比べています ...

1〜15のタイルを空きマスへ滑らせてそろえる15パズルを、React と TypeScript で作りました。半分が解けない並びになる混ぜ方の直し方、段の端をまたいで動いてしまう隣の判定、下へ動かしたタイルが滑らずに飛ぶ描き方を、書き ...

12枚のカードから同じ絵柄の2枚を探す神経衰弱を、React で作りました。偏らないシャッフル、2枚めくったときの判定と裏に戻すタイマー、連打や同じカードの2度押しへの対策、「もう一度」で前のゲームのタイマーと表の面を残さない方法を、 ...

カードの角に「NEW」のような斜めのリボンを付けるには、カードに position: relative と overflow: hidden を付け、細長い要素を絶対配置して45度回します。角からの距離とリボンの長さの決め方を、画素を ...

パンくずリストの各リンクを clip-path の polygon() で矢印の形に切り抜き、左へずらして前の矢印の先を次のくぼみに入れます。重なった部分のクリック、切れて見えなくなるフォーカスの枠、折り返したときのはみ出しも確かめま ...

縦の線と点で出来事を並べるタイムラインを、ol と li の疑似要素だけで作ります。線が最後の点より下に伸びる、点の中に線が透けて見える、文字を大きくすると点がずれるといったつまずきと直し方を、画素を測って確かめました。

長い文章を3行で切って「…」を付けるには、-webkit-line-clamp を display: -webkit-box と組み合わせます。max-height では「…」が付かないことと、padding を付けると4行目が見える ...

区画の境目を波の形にするには、波を描いた SVG を横幅いっぱいに置くか、2つの radial-gradient で描きます。波の下にすき間ができる、画面の幅で波が縮むといったつまずきと直し方を、画素の色を測って確かめました。 ...

grid-template-columns に repeat(auto-fill, minmax(220px, 1fr)) と書くと、親の幅に入るだけカードが並び、余った幅はカードに配られます。auto-fit との違い、狭い画面では ...

色だけなら accent-color の1行で変えられます。形から変えるなら appearance: none で見た目を消し、枠と ::before のチェックを描きます。未確定の状態と、強制カラーモードでチェックが消える問題の直し ...