セクションの下端を斜めにするには、clip-path の polygon() で右下の角を上げます。切った部分に次のセクションの色を出す重ね方、斜めの辺で文字が切れないための余白、画面の幅が変わっても角度を保つ tan() の使い方も ...

Markdown の入力欄とプレビューのスクロールを、見出しや段落の位置でそろえます。全体の割合で合わせたときのずれ、送り返しで止まるスムーズスクロール、画像の読み込み後のずれを Chromium で確かめました。

方眼紙のようなマス目は、縦線と横線の linear-gradient を2枚重ね、background-size でマスの大きさを決めると描けます。5マスごとの濃い線、端を線で閉じる方法、線がにじむときの直し方、入力欄で線と文字をそろ ...

2つの日付の間の営業日と、「何営業日後」の日付を出すコンポーネントを React で作りました。祝日は npm の @holiday-jp/holiday_jp の一覧を使い、日付を文字列のまま照らし合わせて、タイムゾーンによるずれを ...

ページをどこまで読んだかを示す上のバーは、CSS の animation-timeline: scroll() だけで作れます。短いページでバーが伸びきる点の防ぎ方と、枠の中のスクロールに合わせる書き方も確かめました。

長い文章を「1つあたり何字まで」と決めて分け、1つずつコピーできるコンポーネントを React で作りました。Intl.Segmenter で文字数を数える方法、文の切れ目で分ける方法とかぎかっこの扱い、番号を付けても上限に収まる分け ...

画像に filter: grayscale(100%) を付けて白黒にし、:hover のときに grayscale(0%) に戻すと、マウスを乗せた画像だけがカラーになります。transition で色が戻る途中の値、ほかのフィルタ ...

入力欄に打った文章を、20字×20行の原稿用紙のマス目に1字ずつ並べるコンポーネントを React で作りました。Intl.Segmenter で1字ずつに分ける方法、縦書きと横書きを同じ CSS で切り替える書き方、長い文章でも入力 ...

文字の縁取りは -webkit-text-stroke で付けられます。ただし線は輪郭の内側にも描かれ、太くすると文字が細ります。paint-order: stroke fill で線を文字の後ろに回す書き方と、text-shadow ...

選んだ複数の画像を横・縦・格子に並べ、1枚の PNG にして保存する仕組みを React で作りました。大きさの違う画像のそろえ方、正方形への切り抜き、書き出せる大きさの上限、並べ替えで ImageBitmap を解放してしまう落とし ...