フォントサイズの単位や各パーツの幅・高さ等の単位、画像サイズの単位等、ホームページでは色々な所で「サイズの単位」(大きさ、長さの単位)が使われています。そのサイズの単位についてをまとめて解説します。
Web上でのサイズの種類
Web上で使われるサイズ単位の種類は大きく分けて2つあります。
相対単位と絶対単位です。
では、それぞれについて簡単に見ていきましょう。
相対単位
相対単位とは、その要素のフォントサイズやディスプレイ解像度等によって影響を受ける単位。
具体的には、以下の3つがあります。
- em
- 要素のフォントサイズに対する相対的なサイズ値
- ex
- 要素のx(小文字エックス)のフォントサイズの高さに対する相対的なサイズ値
- px
- ピクセル。ディスプレイの画素数。 何個分のピクセルを使って表示するかを指定します。
[補足1]
emとexの違い(赤の高さがem、青の高さがex)
[補足2]
自分のパソコン画面がどのくらいのピクセル数を表示できるかは、「デスクトップ右クリック→プロパティ→設定タブ→画面の解像度」を見れば分かります。 (800×600ピクセル、1024×768ピクセル等と書いてあるはず)
絶対単位
絶対単位とは、ものさしで測れる単位。なはずなのですが、論理解像度の違い等により環境により微妙に大きさが異なることがあるようです。
具体的には、以下の5つがあります。
- cm
- センチメートル。Webサイト作成ではあまり使われることは無いかも。
- mm
- ミリメートル。Webサイト作成ではあまり使われることは無いかも。
- in
- インチ。1インチ＝2.54センチメートル。日本での馴染みは少ない。
- pt
- ポイント。1ポイント＝1/72インチ。マイクロソフトWord(ワード)のフォントサイズの単位でもある。
- pc
- パイカ。1パイカ＝12ポイント。日本での馴染みは少ない。
用途別お勧め単位
基本的に、相対単位を使うことをお勧めします。
- 画像サイズ
- px
デジカメで取った写真等も、基本的にはピクセル単位で大きさを表示しています。ホームページ作成者が見せたい様に画像を表示するにはpxが適しています。 - 文字サイズ
- em
ブラウザの文字サイズ変更で大きさが変わり、閲覧者がそれぞれ自分の見やすい環境を選ぶことが出来ます。 - レイアウト各パーツ幅・高さ
- px
ターゲットとなる画面解像度を決めた後は、幅・高さをpx指定するのが作り手側としては分かり易いです。ただし、他解像度の人のことも考えてデザインしないと、酷くレイアウトが崩れたりすることがあるので注意も必要です。