Web Service

pxからemに文字サイズを変換してくれるツール「px-em」

最近ではレスポンシブWebデザインなどで文字サイズにemを使う機会も増えてきました。しかし、pxでは大体のサイズイメージが湧きやすいけれど、emだとピンと来ないという方は多いのではないでしょうか?そんな時はpxからemに変換してくれる「px-em」が役立ちます。

[ads_center]

px-emの使い方

px-emの使い方

px-em | px to em Calculator

使い方は、まず上のボックスに親pxを指定して、下のボックスに目的のサイズにしたいpxを入力するだけです。そうすると、そのサイズに必要なem単位が表示されます。

文字サイズを指定

上記は親要素の16pxを基準にして、子要素を20pxに変換させた例です。この場合はemにすると1.25emで記述すればいいことが分かります。自分で計算するとめんどくさいですが、こういったツールを使うことで手間も省けてミスも減るのでとても効率的ですね。

というわけで、Web制作の役立つツールの1つとして覚えておくとよさそうです。

関連記事

  1. Evernoteでマージの使い方と復元方法

    Web Service

    Evernoteで複数のノートを整理(まとめる)できるマージの使い方と復元方法

    Evernoteで似たような内容をメモした複数のノートを一つにまとめて…

  2. Web Service

    Macでテキストをコピーした際にプレーンテキストにしてくれるアプリ「FormatMatch」

    Macでテキストなどをコピーしてエバノートなんかに貼り付けると余計な装…

  3. Web Service

    Mac版Pocketがリリースされたのでさっそく使ってみた!

    あとで読むサービスのPocketがMacのアプリでついに登場していたの…

  4. Hex Preview

    Web Service

    カラーコード(HEX値)を入力して色のプレビューを確認できる「Hex Preview」

    Hex Previewという便利なサービスを発見したのでメモがてらご紹…

  5. Web Service

    ワイヤーフレームを作成するCacoo(カクー)がとても便利

    Cacooを使ってワイヤーフレームを作ってみました。CacooとはWe…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP