デザインの無料Webツール

CSSが効かないときの切り分け手順 — セレクター・詳細度・レイヤー・重なり順

書いたCSSが反映されないときに、原因を上流から順番に潰していく手順をまとめます。セレクターが当たっているか、詳細度で負けていないか、@layerの順で決まっていないか、重なり順の親子関係に閉じ込められていないかを、1つずつ確かめます。

配色をコードに落とす手順 — 形式変換・階調生成・トークン化

決めた配色を実装に落とす手順を、形式の変換→階調の生成→トークンとしての整理→コントラスト確認の流れで解説します。色名の付け方や、ダークモードを見据えた設計も整理します。

CSSアニメーションを設計する手順 — イージング・transform・パフォーマンス

CSSアニメーションを設計する手順を、動きの種類の選択→イージングの調整→keyframesの組み立て→パフォーマンス確認の流れで解説します。transformとopacityを使うべき理由や、動きを控えるべき場面も整理します。