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

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

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

PxtoRem

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

• フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
• Media Queriesで使う単位はpx, em, remのどれが適しているか検証
• CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ

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

PxtoRem -Chrome ウェブストア

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

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

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

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

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