#デザイン
16 件
CSS に関数と条件分岐が入ってきた：@function と if()
CSS に追加された @function と if() は、コンポーネントが抱える「同じ宣言のコピペ」を減らす。どちらもまだ Baseline ではないが、何を置き換えるのかは先に読む価値がある。
text-box-trim が使えるようになった：見出しの上下の余白を削る
行ボックスは常に文字より高い。見出し上の半行分の余白は負のマージンで誤魔化してきた。text-box-trim はそれを正しく解決する。
Three.js の浮島を静的サイトに載せる
浮島ページは自分のスクリプトだけを読み込みます。シーンは実行時に生成し、Three.js はこのページのチャンクにだけ入り、最初の HTML には空の舞台しかありません。
モデリングなしで立体感を出す — 手で三角形を組む浮島
島の岩はモデリングツールから書き出したものではありません。五層の不規則なリングを実行時に組み上げ、頂点色とフラットシェーディングだけで石らしく見せています。
シーンの光 — 三つの灯りと一度だけ計算する影
半球光が環境色、キーライトが向きと影、リムライトが島を背景から引き剥がし、残る七つの点光源は灯りを足すだけです。
二つのシェーダーで水をつくる — 水たまり・小川・滝
島に水面シミュレーションも反射もありません。ShaderMaterial は二つだけで、寝ている水と落ちる水を担当し、time と night を共有します。
sibling-index() と sibling-count()：CSS がついに自分が何番目かを知る
Firefox 154 がこの二つの関数を Baseline に押し上げた。兄弟の中での位置と兄弟の総数を返すので、時間差アニメーション、順序に応じた配色、均等割りまで CSS で計算でき、要素ごとのインライン変数が要らなくなる。
autocorrect 属性：自動修正にページが口を出せるように
Chrome 152 がグローバルの autocorrect 属性に対応し、Safari と Firefox は以前から対応していたため Baseline に到達した。spellcheck との違い、長年ベンダー接頭辞だった理由、切るべき場面をまとめる。
@layer で CSS の優先順位を「詳細度競争」から「順序の宣言」へ
スタイルが崩壊するのは詳細度を足して解決するからです。カスケード層は順序を明示します。層の間は順序のみ、層の内部では従来どおり詳細度で決まります。
アンカーがヘッダーに隠れる：scroll-padding-top を一箇所に
固定ヘッダーはアンカーの着地点を隠す。見出しごとの scroll-margin は必ず漏れる。正解はスクロールコンテナの scroll-padding-top で、実際のヘッダー高さを ResizeObserver から戻す。
モーダルはネイティブの dialog で：無料で付いてくるものが多い
自前のモーダルはフォーカストラップ、ESC、スクロール固定、フォーカス復帰を全部書くことになる。dialog と showModal なら全部入りで ::backdrop も使える。
ダークモードなのにフォームが白い：color-scheme が本丸
背景を暗くしてもネイティブコントロールは暗くならない。select のポップアップや日付ピッカー、自動入力の下地は color-scheme が決め、accent-color はチェックボックスとスライダーまで。
デザイントークン：1ファイルでサイト全体を統制する
色・余白・角丸をすべて _tokens.scss に集約した理由と、ビジュアル方針の変更が2ファイルの書き換えだけで済んだ話。
手書き i18n：3 言語サイトでルーティングを自作する代償
このサイトの i18n は Astro 組み込みの設定を使わず自作しました。その理由と、代償が実際に現れた場所——2 回の 404 と、半分しか翻訳されていなかったブログについて書きます。
孔版印刷の制約をデザイントークンに翻訳する
このサイトの視覚方向は孔版印刷（リソ）です。実際にやったのは印刷の物理的な制約をトークンに書き出すことで、おかげで見た目を変えても触ったのは 2 ファイルだけ、コンポーネントは 1 行も直していません。
View Transitions でテーマ切り替えの波紋を作る
クリック位置から広がる円で新しいテーマを現します。半径は最も遠い角まで届く必要があり、終了時にカスタムプロパティを消さないと次の切り替えに漏れます。