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. Web Service

    話題のiPhoneのTODO管理アプリ「Clear」を使ってみた

    いくつかの記事で話題になっていたTODO管理アプリのClearがいつの…

  2. HatebuReader

    Web Service

    はてブのタグを登録していつでも手軽にその最新記事をチェックできるiPhoneアプリ「HatebuRe…

    とても便利なiPhoneアプリがあったのでご紹介します。はてブで自分が…

  3. Web Service

    指定した色を基準にグラデーションから好きな色を選択できる「0to255」

    指定した色を基準にしてグラデーションからその色より明るい(または暗い)…

  4. Flat UI Colors

    Web Service

    フラットデザインに合う配色のカラーコードを取得できる「Flat UI Colors」

    流行のフラットデザインに合う配色を集めたツール「Flat UI Col…

  5. Web Service

    iPadで人気の手書きノートアプリ「Note Anytime」のiPhone版が登場したので使ってみ…

    iPadの手書きノートアプリとして話題となった「Note Anytim…

  6. Web Service

    iPhoneの画像編集アプリ「Filterstorm」を使ってみた

    面白そうだったので使ってみました。iPhoneで画像編集なんてあんまり…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP