toggle
札幌市東区でマンガ・イラスト制作、WEBデザイン・DTP制作、雑貨制作、プラモ制作などを行う就労支援事業所です。マスコットキャラクター、ミライクマ3兄弟のLINEスタンプ好評発売中!
2018-06-05

ホームページに使える長さの単位

今回は、ホームページを作るのに、使える長さの単位について説明します。

1インチ=2.54cmです。インチの単位は、テレビの大きさなどにもよく使用されます。このインチの仲間に、パイカ、ポイントがあります。1インチ=12パイカ=72ポイントの関係があります。この変化は、10進法に慣れきっている現在の日本人にとっては変則的な感じがしますが、アメリカ合衆国では中心に使用されている単位系です。
ピクセルという単位もあります。印刷業界で主流になっている単位です。
それらの単位は、絶対単位です。他の要素に左右されることなく使用できます。

もちろん、10進数系の単位もあります。センチメートル、ミリメートルが使用できます。

その他の単位もあります。これは、相対的な単位です。
emという単位です。これは、親要素の単位の初期値を1として、半分のサイズにしたいなら0.5、2倍の大きさにしたいなら2、と書きます。
たいていのタグの初期値は16pxです。なので、16pxの半分の8pxを表示したかったら、16×0.5なので、0.5emとなります。ただし、タグの種類によって、初期値が16でないタグもあります。

この点で、emを使用するのに、苦戦したホームページ制作者もいると思います。そこで、新しく作られた単位がremです。

remは、CSS3から使える、「root(起源)のem」という意味の単位です。
IEでは9以降は対応しています。なので、2018年現在ならほとんどのユーザーがホームページを見ることができる単位です。emとremは何が違うのでしょうか。emは、使用する要素によって依存します。しかし、remは、大元のhtml要素に対する割合なので、同じ12ピクセルにするにも親要素がhタグだから0.75emにしようとか、pタグだから1emにしようとか、考える必要がありません。すべての要素に共通で計算できます。

絶対単位と相対単位がありますが、絶対単位のいいところは、紙に印刷した時に常に同じ大きさになるというところです。ほとんどの解像度の比が4:3だった1990年後半の頃は良かったです。しかし、2018年現在のWeb業界は、いろんな倍率のディスプレイがあり、それをさらに拡大・縮小したりして見る人がたくさんいるので、色んな倍率に対応してホームページを作る必要が出てきました。それで、相対単位が必要となったのです。
場合によって、使い分けるといいと思います。

今回の説明は以上です。ありがとうございました。


関連記事