Chrome 95のデベロッパーツールの新機能が便利！vh, vw, rem, emなど、CSSの単位を簡単にオーサリング

先週リリースされたChrome 95のデベロッパーツールに搭載された新機能が便利なので、紹介します。

最近の新機能だと、Flexboxのデバッグツール（紹介記事）やCSS Gridのデバッグツール（紹介記事）などがありますが、Chrome 95ではCSSの単位（vh, vw, rem, emなど）を簡単にオーサリングできるようになりました。

New CSS length authoring tools

※デベロッパーツールの日本語表示（Chrome 94の新機能）は、設定（歯車アイコン）から言語を日本語に変更します。

デベロッパーツールの新機能の使い方は、簡単です。

1. Webページを開き、デベロッパーツールを起動します。
2. スタイル（Styles）パネルで、長さを定義したCSSのプロパティ（width, height, margin, paddingなど）を探します。
3. 単位にカーソルを合わせると下線が表示され、下線をクリックすると、単位が表示されます。

単位の下線をクリックすると、単位を簡単に変更できる

値にカーソルを合わせると、マウスポインターが水平カーソルに変わります。水平方向にドラッグすると、値が増減します。数値を10倍にするには、shiftキーを押しながらドラッグします。

値をホバーすると、値を簡単に変更できる

値と単位は、テキストとして編集することもできます。値をクリックすると、値と単位が選択され、編集できます。

値をクリックすると、テキストとして編集できる