#デザイン
12 件
Three.js の浮島を静的サイトに載せる
浮島ページは自分のスクリプトだけを読み込みます。シーンは実行時に生成し、Three.js はこのページのチャンクにだけ入り、最初の HTML には空の舞台しかありません。
モデリングなしで立体感を出す — 手で三角形を組む浮島
島の岩はモデリングツールから書き出したものではありません。五層の不規則なリングを実行時に組み上げ、頂点色とフラットシェーディングだけで石らしく見せています。
シーンの光 — 三つの灯りと一度だけ計算する影
半球光が環境色、キーライトが向きと影、リムライトが島を背景から引き剥がし、残る七つの点光源は灯りを足すだけです。
二つのシェーダーで水をつくる — 水たまり・小川・滝
島に水面シミュレーションも反射もありません。ShaderMaterial は二つだけで、寝ている水と落ちる水を担当し、time と night を共有します。
@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 でテーマ切り替えの波紋を作る
クリック位置から広がる円で新しいテーマを現します。半径は最も遠い角まで届く必要があり、終了時にカスタムプロパティを消さないと次の切り替えに漏れます。