本記事は主にCSSでサイズ指定を行う際に利用頻度の高い3種類の単位について
値入力だけで計算を行い、
サイズ指定の単位を簡単に変換できる簡易ツールを公開しています。
- px(ピクセル)
- rem(レム)
- em(エム)
- vw
絶対値から相対値への変換などは実務でも多く発生する作業です。
急な仕様変更で修正が必要な方や、自身で計算したくない方、もらったデザインの単位とは異なる値に変更したい方など、ぜひご利用いただければと思います。
単位変換計算ツール
以下、本記事で公開している計算ツールになります
使用方法がわからない方は後述のツールの使い方をご覧ください。
変換モード選択
基準となるピクセル値(px)を入力
px変換する値を入力
出力結果
ツールの使い方
1.変換モードの選択
変換を行いたい値を設定します。
例えばpx単位からremへ変更をしたい場合は『px→rem・em』にチェックを入れてください。
逆に、rem単位からpxへ変更をしたい場合は『rem・em→px』にチェックを入れてください。
2.基準となるピクセル値を入力
変換する際に基準となる値を入力します。
例えばremはブラウザのデフォルトであるフォントサイズをもとに表示サイズを決定します。
そのため、利用しているブラウザや自身で設定しているデフォルトのフォントサイズを指定する必要があります。
特に設定などをしている認識がなければ基本的に主要ブラウザでは『16px』をデフォルトのサイズとしています。
ちなみに、VWの計算を行いたい場合は画面サイズを入力します。
3.変換する値を入力
実際に変換したい値を入力します。
例えば『px→rem・em』への変換で16pxのrem単位を計算したい場合は『16』と入力してください。
4.出力結果
計算結果を出力結果に表示します。
rem(レム)とem(エム)が同じ変換として扱っていますが、
remはhtmlタグのデフォルトフォントサイズ、emは親要素のサイズを指定して変換してください。
変換の方法としては同じ処理となるためまとめています。
単位指定の違いやメリットデメリット
サイズ指定の単位についてどのようなものかわからない方のために、それぞれの特徴や違い、メリットデメリットについて簡単に記載いたします。
ある程度理解している方は読み飛ばしてください。
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月現在、ローカルでの動作確認をしておりますが、
個人作成のツールのため品質の保証はしておりません。
ツール使用による不利益がある場合に当サイトでは一切の責任を負いかねますので
ご利用の際には十分に注意していただき、自己責任でご利用ください。
