ブログ · 14 ページ目
開発とデザイン、あとは雑記。
アンカーがヘッダーに隠れる：scroll-padding-top を一箇所に
固定ヘッダーはアンカーの着地点を隠す。見出しごとの scroll-margin は必ず漏れる。正解はスクロールコンテナの scroll-padding-top で、実際のヘッダー高さを ResizeObserver から戻す。
モーダルはネイティブの dialog で：無料で付いてくるものが多い
自前のモーダルはフォーカストラップ、ESC、スクロール固定、フォーカス復帰を全部書くことになる。dialog と showModal なら全部入りで ::backdrop も使える。
ダークモードなのにフォームが白い：color-scheme が本丸
背景を暗くしてもネイティブコントロールは暗くならない。select のポップアップや日付ピッカー、自動入力の下地は color-scheme が決め、accent-color はチェックボックスとスライダーまで。
ヘッダーの高さを勘で書かない：ResizeObserver で実測して戻す
ナビの折り返し、遅れて届く Web フォント、内容の長さの変化で、CSS に書いた定数はすぐずれる。ResizeObserver で要素そのものを観測し、実測値を変数に書き戻す。
デザイントークン：1ファイルでサイト全体を統制する
色・余白・角丸をすべて _tokens.scss に集約した理由と、ビジュアル方針の変更が2ファイルの書き換えだけで済んだ話。
手書き i18n：3 言語サイトでルーティングを自作する代償
このサイトの i18n は Astro 組み込みの設定を使わず自作しました。その理由と、代償が実際に現れた場所——2 回の 404 と、半分しか翻訳されていなかったブログについて書きます。