STUDIOのレイヤーパネルがパワーアップ!要素の検証が可能になりました
Studio
2021.11.01
Updated:2024.11.15
アニメーションやレスポンシブ設定の有無がレイヤーパネルで確認できるようになりました!

これまでレイヤーパネルは、配置した要素の構造やレイヤー名を管理する役割を持っていました。
本日より新たに、要素ごとの
レスポンシブ対応の有無
アニメーション設定の有無
がレイヤーパネルで確認できるように!
Webページの仕上げ段階の作業がグッと楽になる、嬉しい新機能です!
新しいレイヤーパネルの見方
「ホバー時」や「モバイルサイズ時」など、デフォルト以外の条件のときのスタイル変化が設定されているレイヤーには、右側の列にレイヤーインジケーター(・)が表示されます。
レイヤーパネル上部で、検証する情報の種類を切り替えることができます。
コンディション

「:hover」や「&appear」のコンディションに対してアニメーションが設定されている箇所にレイヤーインジケータが表示されます。
レスポンシブ

レイヤーごとに、スタイルの変化が設定されているブレイクポイントにレイヤーインジケータが表示されます。
複雑な構造のサイトを検証する際は、横幅を調節するのもおすすめ。
ぜひ早速新しくなったレイヤーパネルを開いて、さらに効率良く快適なデザイン体験を実感してください!