この記事では、CSSでサイズを指定するときによく使われる、次の4種類の単位を変換できる計算ツールを公開しています。
・px（ピクセル）
・rem（レム）
・em（エム）
・vw
変換したい数値と基準になる数値を入力するだけで、pxからrem・em、pxからvwなどへ簡単に変換できます。
絶対値から相対値への変換などは実務でも多く発生する作業です。
急な仕様変更で修正が必要な方や、自身で計算したくない方、もらったデザインの単位とは異なる値に変更したい方など、ぜひご利用いただければと思います。
単位変換計算ツール
以下、本記事で公開している計算ツールになります
使用方法がわからない方は後述のツールの使い方をご覧ください。
変換モード選択
基準となるピクセル値(px)を入力
px変換する値を入力
出力結果
ツールの使い方
1.変換モードの選択
変換を行いたい値を設定します。
例えばpx単位からremへ変更をしたい場合は『px→rem・em』にチェックを入れてください。
逆に、rem単位からpxへ変更をしたい場合は『rem・em→px』にチェックを入れてください。
2.基準となるピクセル値を入力
単位を変換するには、計算のもとになる大きさが必要です。
このツールでは、その大きさを「基準となるピクセル値」へ入力します。
変換する単位によって、基準になるものが異なります。
pxとremを変換する場合は、Webページ全体の基準になっている文字サイズを入力します。
CSSでは、ページ全体の基準になるhtmlタグを「ルート要素」と呼びます。
html {
font-size: 16px;
}
上記の場合は、htmlタグの文字サイズである16pxを入力してください。
htmlタグへ文字サイズを設定していない場合は、一般的にブラウザで使用される16pxを基準にして計算できます。
ただし、サイトのCSSやブラウザの設定によっては、16px以外の文字サイズが使われている場合もあります。
pxとemを変換する場合は、変換したい場所で基準になっている文字サイズを入力します。
たとえば、親要素の文字サイズが20pxの場合は、基準となるピクセル値へ20を入力してください。
.parent {
font-size: 20px;
}
「親要素」とは、HTMLで対象の要素を囲んでいる一つ外側の要素です。
次のHTMLでは、parentクラスを設定したdivタグが、childクラスを設定したpタグの親要素になります。
<div class="parent"> <p class="child">表示する文章</p> </div>
pxとvwを変換する場合は、Webページが表示される部分の横幅を入力します。
たとえば、横幅が1,000pxの場合は、基準となるピクセル値へ1,000を入力してください。
vwは画面の横幅を100等分して計算する単位です。横幅が1,000pxの場合は、1vwが10pxになります。
3.変換する値を入力
実際に変換したい値を入力します。
例えば『px→rem・em』への変換で16pxのrem単位を計算したい場合は『16』と入力してください。
4.出力結果
計算結果を出力結果に表示します。
このツールでは、rem（レム）とem（エム）を同じ変換モードにまとめています。
remとemは、基準となる文字サイズに対して「何倍の大きさにするか」で計算するため、変換方法は同じです。
ただし、計算の基準になる場所が異なります。
remは、Webページ全体の基準になるhtmlタグの文字サイズを使います。
emは、変換したい場所で基準になっている文字サイズを使います。
どちらを入力すればよいか分からない場合は、まず16pxを入力して計算してみてください。
特に文字サイズを変更していなければ、16pxを基準として計算できることが多いです。
画面幅に合わせて文字サイズを自動で変化させたい場合は、clamp()関数も便利です。最小・最大の文字サイズと画面幅を入力するだけでCSSを作成できるジェネレーターを、以下の記事で公開しています。
単位指定の違いやメリットデメリット
サイズ指定の単位についてどのようなものかわからない方のために、それぞれの特徴や違い、メリットデメリットについて簡単に記載いたします。
ある程度理解している方は読み飛ばしてください。
px（ピクセル）
px（ピクセル）は、絶対値の単位指定で、画面上の1つのドット（ピクセル）を表します。つまり、文字や要素のサイズを明確なピクセル数で指定します。
font-size: 16px; /* フォントサイズを16ピクセルに指定 */ width: 300px; /* 要素の幅を300ピクセルに指定 */ height: 200px; /* 要素の高さを200ピクセルに指定 */
メリット
- 特定のピクセル数で要素のサイズを正確に指定できる。
- 画像の表示など、具体的なピクセル単位が必要な場面で便利。
デメリット
- ピクセル密度の異なるディスプレイ（Retinaディスプレイなど）で表示が変わる可能性がある。
- レスポンシブデザインには適さない場面もある。(レイアウト崩れになりやすい)
rem（レム）
rem（レム）は、相対的な単位で、ルート要素（通常は<html>タグ）のフォントサイズ(デフォルト)に対する倍率を表します。ルート要素のフォントサイズが変更されれば、remで指定された要素のサイズもそれに合わせて変更される。
font-size: 1.5rem; /* フォントサイズをデフォルトフォントサイズの1.5倍に指定 */ padding: 0.5rem; /* パディングをデフォルトフォントサイズの0.5倍に指定 */
メリット
- デフォルトのフォントサイズに応じて要素のサイズが調整される。
- デフォルトフォントサイズの変更に合わせて、他の要素のサイズも自動的に調整される。
- レスポンシブデザインと相性が良い
デメリット
- IE8など、一部の古いブラウザではサポートされていない場合がある。
- ブラウザによってはデフォルトのフォントサイズが異なる場合がある。
- 事前にルート要素(htmlタグ)にデフォルト要素の指定をする必要がある。
(上記によるレイアウト崩れを防ぐため)
em（エム）
em（エム）は前述したrem（レム）同様に、相対的な単位で、remとの違いはデフォルトのフォントサイズを参照するのではなく親要素のフォントサイズに対する倍率を表します。
親要素のフォントサイズが変更されれば、emで指定された要素のサイズもそれに合わせて変更されます。
たとえば、親要素に「font-size:10px;」を指定して、子要素に「font-size:1em;」を指定すると、親要素と同じ10pxが子要素のフォントサイズとなります。
font-size: 1.5em; /* フォントサイズを親要素のフォントサイズの1.5倍に指定 */ padding: 0.5em; /* パディングを親要素のフォントサイズの0.5倍に指定 */
メリット
- 親要素のフォントサイズに応じて要素のサイズが調整される。
- 親要素のフォントサイズの変更に合わせて、他の要素のサイズも自動的に調整される。
- レスポンシブデザインと相性が良い
- コンテンツごとに文字サイズを調整したい場合におすすめ
デメリット
- 親要素のフォントサイズに依存するためフォントサイズの修正時には注意が必要
- 全体のフォントサイズを修正するのには手間がかかる
vw
vwは、ビューポートの幅に対する割合を表します。ビューポートとは、表示されているウィンドウや画面幅を指します。
font-size: 5vw; /* フォントサイズをビューポート幅の5%に指定 */ width: 50vw; /* 要素の幅をビューポート幅の50%に指定 */
メリット：
- ビューポートのサイズに応じて要素のサイズを調整するのに適している。
- レスポンシブデザインで頻繁に使用される。
- ウィンドウのサイズ変更に伴って、要素のサイズもリアルタイムに変更されます。
デメリット：
- 古いブラウザではサポートされていないことがある。
- サイズ計算が難しい。
最後に
本記事で公開しているツールは2023年8月現在、ローカルでの動作確認をしておりますが、
個人作成のツールのため品質の保証はしておりません。
ツール使用による不利益がある場合に当サイトでは一切の責任を負いかねますので
ご利用の際には十分に注意していただき、自己責任でご利用ください。
