さまざまな単位

Webサイト上には、さまざまな単位があります。文字のサイズや要素のサイズを指定されるために使用される数値が多く、特にCSSを使ってホームページを作成しているときには、単位を把握しておかなければなりません。単位は、大きく分けて「絶対単位」と、「相対単位」の2種類があります。「絶対単位」は、ブラウザーのサイズや表示の領域に関係なく、指定した通りに表示される単位です。「px」が一般的なもので、例えば「50px」と指定したら、どのブラウザーから確認しても50pxになります。統一はされている一方で柔軟性に欠けているため、さまざまな種類のデバイスに対応させたいと思ったときには不向きになる場合もあります。一方で「相対単位」の方は、「他の要素のサイズを基準として」決定される単位になります。親要素の数値で、子要素の数値が決定されていくのです。絶対に大きさの変わらない絶対単位に対して、場合によってサイズの変更ができるので便利な場面も多くあります。例えば「%」は、割合で算出されます。親要素の幅が800pxで、子要素に50%が指定されていた場合、幅が400pxとして計算されます。「vw」が「viewport tidth」の頭文字を撮ったもので、ビューポートの幅を基準としたときの割合の単位となっています。例えばビューポートの幅が1200pxの場合、50vwは半分の600pxと計算することができます。高さの場合は「view port height」の頭文字を取った「vh」となり、ビューポートの高さを基準とした割合となっています。幅の場合と同じ計算方法となります。表示されている領域の幅や高さによって変動することが可能になっているために、デバイスのサイズが違っていたとしても、きちんと対応できるようになっています。