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. JTF日本語スタイルチェッカー

    Web Service

    日本語の文章を手軽にチェックできる「JTF日本語スタイルチェッカー」

    JTF日本語スタイルチェッカーは日本語の文章を手軽にチェックすることが…

  2. Web Service

    PhotoshopのようなインターフェースのCSS3ジェネレーター「Layer Styles」

    Photoshopに慣れてる人なら違和感なく使いこなせそうですね。CS…

  3. Web Service

    iPhoneで人気のメールクライアント「Sparrow」を使ってみたのでメール設定など色々

    iPhone版のメールクライアント「Sparrow」を使ってみました。…

  4. Web Service

    Chromeで手軽に電卓を使いたい時に便利な拡張機能「Calculator」

    Chromeでネットを閲覧中にちょっとした計算をしたいといった時がある…

  5. CSS Color Chart

    Web Service

    CSSのカラーネーム、HEX、RGBを1クリックでコピーできるカラーチャート「CSS Color C…

    CSS Color Chartがとても便利だったのでご紹介します。とて…

  6. Noise Texture

    Web Service

    手軽にノイズテクスチャの画像を作成できるツール「Noise Texture」

    手軽にノイズテクスチャの画像を作成できる便利なツール「Noise Te…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP