こんにちは！デザイナーのヒロです！
こちらの記事で、デザインで使う文字の大きさの単位をご紹介しました。
今回は、Webサイトのコーディングやアプリ開発で、文字やサイズを指定する単位をご紹介しますね！
Webサイトで文字やサイズを指定する単位も、実はいっぱいあるんです…！
これを覚えておけば、Webデザインやアプリ開発に関わった時に混乱しなくなるので、ぜひチェックしておきましょう！
px（ピクセル）
まずは、前回も出てきたピクセルです！
これからいろんな単位を説明する上で、
ピクセルの単位が１番わかりやすいので、最初に説明しますね！
ディスプレイは、このピクセルがぎっしり詰まってて、いろんな画像や映像を表現します。
なので、1ピクセルは、ディスプレイの中の1つのピクセルの大きさのことを指します。
ピクセルについては、こちらの記事で解像度と合わせて紹介しているので、ぜひ読んでみてください。
デザインをする時は、ピクセルを使うことが一般的なので、
Webサイトのコーディングでも、ピクセルを使うと、統一できてわかりやすいですよね。
ただ最近では、ピクセルで指定するのは一般的ではなくなってきています。
pxの注意点
でも最近では、いろんな大きさや解像度のディスプレイが出てきています。
テレビのように、サイズは大きいけど、解像度が低いディスプレイだったり、
スマートフォンのように、サイズは小さいけど、解像度は高いディスプレイだったり…。
ピクセルで指定していた場合、どうなるでしょうか？
ピクセルは、そのデバイスのディスプレイの1ピクセルの大きさのことです。
なので、
テレビでは、1ピクセルが大きいので、すごく大きい文字になったり、
スマートフォンでは、1ピクセルが小さいので、すごく小さい文字になったりします。
テレビとスマートフォンの違いだけなら、まだ良いかもしれません。
最近のパソコンやスマートフォンのディスプレイは、どんどん高解像度化が進んでいます。
同じパソコンやスマートフォンでも解像度が全然違うので、
ピクセルで指定してしまうと、文字の大きさもデバイスによって変わってしまうんです！
これはちょっと問題ですよね。
なので、この問題を解決するために、
ピクセルをベースに様々な単位が生まれました。
em（エム）, rem（レム）
em（エム）
まず、最初にご紹介するのが、em（エム）です！
emの大きさは、ブラウザのフォントサイズ（文字の大きさ）で決まります。
多くのブラウザは、16pxがデフォルトのフォントサイズになので、
1em = 16px
1.5em = 24px
2em = 32px
と計算されて、その大きさを表示します。
emの良いところは、
見ている人のブラウザの設定によって、フォントなどの大きさを変更できるところです！
rem（レム）
次にご紹介するRem（レム）も、emと同じく、
ブラウザのフォントサイズ（文字の大きさ）で決まります。
では、なにが違うのでしょうか？
emとremの違い
じつは、
emは、親要素のフォントサイズが基準になり、
remは、ルート要素のフォントサイズが基準になっています。
何を言っているのか、わからないですよね。
まずは、言葉の説明をしますね。
ルート要素は、HTMLドキュメントで最初に現れるタグのことで、多くの場合で、<html>タグのことです。
親要素は、入れ子関係になっているタグたちの中で、一番外側にいるタグのことです。
<html> ← ルート要素
<div> ← <p>タグの親要素
<p>ほげほげ</p>
</div>
</html>
ブラウザのフォントサイズが16pxに設定されていた場合、
ルート要素（ほぼ<html>タグ）にフォントサイズを指定しなければ、
ルート要素のフォントサイズは、ブラウザのフォントサイズ（=16px）になります。
div { font-size: 1.2em; } = 16px x 1.2 = 19.2px
p { font-size: 1em; } = 19.2px x 1 = 19.2px
div { font-size: 1.2rem; } = 16px x 1.2 = 19.2px
p { font-size: 1rem; } = 16px x 1 = 16px
...というように、
じつは、emは、親子関係の親要素の大きさを基準に再計算するようになっていますが、
remは、常にルート要素（=ブラウザのフォントサイズ）で計算するようになっているんです。
こうしてみると、remの方がシンプルで、emは複雑ですよね。
ただ、場合によってemで指定した方が良いケースもあるので、どちらも覚えておきましょう！
%（パーセント）
%（パーセント）は、普段も日常的に使いますよね！
これも、使い方はemと同じです。
ブラウザのフォントサイズが16pxの場合、100% = 16pxになります。
ただ、emと同じく親要素の大きさを基準に再計算されます。
なので、また以下のHTMLドキュメントで考えると、
<html> ← ルート要素
<div> ← <p>タグの親要素
<p>ほげほげ</p>
</div>
</html>
div { font-size: 120%; } = 16px x 120% = 19.2px
p { font-size: 100%; } = 19.2px x 100% = 19.2px
となります。
vw、vh（ヴイダブリュー、ヴイエイチ）
次にご紹介するのは、vwとvhです！
これらの単位は、Viewport（ビューポート）の幅と高さに従って変化する大きさのことです。
ちなみに、Viewportって知っていますか？
Viewportは、「表示領域」のことで、作成したWebサイトを、PC・スマートフォンなどでどのような表示にするのか、HTMLで設定をすることができます。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
この場合、width = device-width は、
Webサイトの幅を、デバイスの画面サイズの幅に合わせる、という指定です。
vw、vhはこの幅を基準にします。
例えば、
スマートフォンなどで、Viewportの幅が400pxの時、1vw = 4px となります。
PCのディスプレイなど、Viewportの幅が1000pxの時は、1vw = 10pxになります。
vwがViewportの幅を基準に、vhがViewportの高さを基準にします。
また、emや%のように親子関係で計算が変わることもありません。
Viewportを理解してしまえば、わかりやすいですね！
そのほかにも、
- vmin : Viewportの幅と高さの小さい方を基準にする。
- vmax : Viewportの幅と高さの大きい方を基準にする。
といった単位もあります。
これは、スマートフォンが縦向き・横向きに変えても、大きさ統一したい時に使われます。
レスポンシブWebサイトでは、vw、vh での指定が便利なので、
最近では多くのWebサイトで使われています。
ぜひチェックしておきましょう！
pt（ポイント）※ iOS
ここからは、iOSのアプリ開発で使う単位になります。
iOSアプリでは、大きさの単位にポイントを使っています。
実は、このポイントは、こちらの記事で説明したポイントと定義が変わっています！
このポイントは、
Retinaディスプレイではない場合、1ポイント=1ピクセル。
Retinaディスプレイの場合、1ポイント＝2ピクセル。
そして、iPhone X などさらに高画質の場合、1ポイント＝3ピクセルとなるんです！
紛らわしいですね…
もし、iOS開発に関わることがあった時には注意しましょう！
dp（ディーピー）※ Android
iOSのポイントと合わせて覚えておいて欲しいのが、
Android開発の単位である「dp」です。
密度非依存ピクセル（density-independent pixels）の略称ですが、これは忘れてもOKです！
Androidにも、Retinaディスプレイのように様々な高解像度ディスプレイが存在します。
なので、iOSのポイントと同じように、
MDPIディスプレイ（中程度の解像度ディスプレイ）の時に、1dp＝1ピクセル。
XXXHDPIディスプレイ（超高解像度のディスプレイ）では、1dp＝4ピクセルと定義しています！
Androidはディスプレイが多く、
ほかにも、HDPIディスプレイ、XHDPIディスプレイ、などいろいろあります。
dpもそれによって変わりますので、
Android開発に関わる時はぜひ調べてみてください！
いかがでしたか！
いっぱいいろんな単位が出てきますね…
実は、この単位は僕でもたまに定義がわからなくなり、調べることもしばしばあります。
大きさの単位はWebデザインをする上で重要ポイントになるので、必ず覚えておきましょう！
コメント