CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem

フォントサイズの指定によく使用される単位は、相対値で指定できる単位が人気です。中でも、親要素に相対的なemより、常にルートに相対的なremの方が使い勝手がよいでしょう。emを使用すると複利計算になるため、深い階層の子要素はサイズ指定が複雑になってしまいます。

ルートに指定したサイズをベースに、px単位でremの指定値を一覧表示してくれる便利なChromeの機能拡張を紹介します。
毎回計算していた人には、かなり嬉しいツールだと思います。

サイトのキャプチャ

PxtoRem


remについては下記の記事に詳しい説明があります。

remの指定値を一覧表示してくれる便利ツールは、こちら。

サイトのキャプチャ

PxtoRem -Chrome ウェブストア

非常にシンプルなツールで、ベースの値を入力すると、すぐにremの指定値を一覧表示してくれます。左上の「PX」を変更すると、ベースの値を変更できます。

PxtoRemのキャプチャ

ルート値を16pxにした時のremの指定値

remの指定値はデフォルトで、8pxから40px分までが表示されます。右上の「List」で自由にカスタマイズできます。

PxtoRemのキャプチャ

ルート値を10pxにした時のremの指定値

常にルート(html要素)に相対的なrem、親要素(.main)に相対的なemの比較は下記のデモが分かりやすいです。

See the Pen Em vs Rem by Mojtaba Seyedi (@seyedi) on CodePen.

sponsors

top of page

©2018 coliss