作業台

判断から貼るまでを、このサイトの中で終わらせるための6枚。決めた値は URL に残り、面をまたいでも引き継がれます。相手に URL を送れば同じ状態が開きます。

• 字と余白と幅本文の級・余白の刻み・版面幅を一本で動かし、375px と 1240px の折り返しを見てから CSS を持ち帰る
• 色と階段地・面・文字・アクセントを和文の予約ページで動かし、4.5:1 を割る組み合わせは持ち帰れない。薄い〜濃いの階段も出す
• 影光の向き・柔らかさ・濃さの感覚のつまみから3段の影を作り、--shadow-1〜3 として持ち帰る
• グラデーションとスクリム型・角度・色止め・補間空間を見ながら書く。写真の上のスクリムは文字の 4.5:1 を実測してから持ち帰る
• 動きの曲線と時間曲線を掴んで動かし、入る・出る・位置が移るの3場面で時間と距離を決める。出力には動きを減らす設定の分岐が必ず入る
• 並べ方（Flexbox と Grid）並べる個数・向き・折り返し・寄せ・列の作り方をつまみで動かし、箱が実際に並ぶのを見てから CSS を持ち帰る
• 部品がトークンに追従する決めたトークンで、ボタン・入力欄・カード・表・警告など8つの部品が一斉に張り替わる。完成形の :root と用途の CSS を持ち帰る

使い方#

1. 逆引きかテーマから、困っている値の作業面に着く
2. つまみを動かし、和文の予約ページで確かめる。本文の文字が 4.5:1 を割る組み合わせはコピーできない
3. コピーした :root を出発点のCSSに差し替える
4. 最後に部品がトークンに追従するで全部を見て、公開前チェックへ

つまみは JavaScript で動きます。無効でも、各面の既定の CSS は読めます。