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

Post on:2021年10月25日

sponsors

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

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

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

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

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

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

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

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

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

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