Web制作で使う単位

Webサイトでは、CSSを使ってブロックの幅や高さを指定したり、文字のサイズを調整したりすることができます。

この際に適した様々な単位があります。

 

「相対単位」と「絶対単位」


CSSを使ってサイズを指定する際には「0」の場合を除き、必ず数値に単位を付加して使用します。

「相対単位」


これは、指定の対象となる要素自信を囲む「親要素」や、Webブラウザの環境に依存するものです。

HTMLではたいていの場合、要素の中に要素が入った入れ子状態でマークアップします。

例えば、「<header><h1>見出し</h1></header>」の場合、

h1要素から見ると、header要素が「親要素」になり、逆にheader要素から見たh1要素は「子要素」という関係です。

相対単位
サイズ
em(エム)
1em=1文字分の長さ
ex(エックスハイト)
1ex=小文字の「x」の高さ
px(ピクセル)
1px=画面上の1ピクセル
%(パーセント)
親要素の長さに対して変化する

例)50%:親要素が100pxなら50px
rem(レム)
ルート要素の文字サイズを「1」としたときの倍率
 

「絶対単位」


一般的に物差しで測ることができる単位をいいます。

ただこれは、印刷向けのCSSを作成する際、

紙の実測を想定してセンチメートルやミリメートルなどを使うときに利用され、

画面表示向けの単位としては、あまり使われません。

単位
換算
mm(ミリメートル)
10mm=1cm
cm(センチメートル)
1cm=10mm
in(インチ)
1in=2.54cm
pt(ポイント)
72pt=1in
pc(パイカ)
1pc=12p
 

Web制作で使う代表的な単位


Web制作でよく使う単位は、「px(ピクセル)」、「%(パーセント)」、「em(エム)」です。

ボックスの幅や余白、ボーダーなどの指定のように、確定した数値を使いたい場合は「px」を使用します。

例えば、コンテンツを分割して左右に並べる時には、横幅の指定が必要になるので、

隣り合うボックス間の計算がしやすい「px」が多く使われます。

また、レスポンシブWebデザインのように、多様なデバイスに応じてコンテンツ幅を変えたり、

リキッドレイアウトのようにウィンド幅に追随させるレイアウトでは、「em」や「%」が使われたりします。

 

文字に使う単位


見出しや段落などのメリハリは、CSSでの装飾のほかに文字サイズを変化させたりします。

文字サイズの調整には「px」、「em」、「%」さらに「キーワードでの指定」です。

「px」は相対単位なので、異なるWebブラウザでも、同じ文字サイズになるので使い勝手がいいです。

「em」と「%」は、親要素の文字サイズに対する相対的な大きさを指定します。

例えば、body要素の中に書き込むp要素に対して「150%」と指定した場合、

body要素の文字サイズの1.5倍になります。

「em」の場合は、親要素の文字サイズを基準にして「〇文字分」と相対的に表示します。

例えば、「1.5em」であれば、1.5倍と考えられるため、直感的なサイズの変更に使われます。

 

まとめ

  1. Webサイトでは相対指定の単位をよく使う
  2. pxは固定的なレイアウトや配置に使われる
  3. 文字サイズの指定にはemを使うと、直感的に調整しやすい
 

 

 

 

コメントを残す

サブコンテンツ

【PR】

今だけ!値下げ決行!【初心者に嬉しい】画像編集マニュアル

【期間限定】LINEの人気スタンプが無料で手に入る!

お得な返礼品を貰おう!ふるさと納税

【無料登録】オススメのASPはココ!

女性が有利?ポイントサイト攻略マニュアル【無料】

奇跡的に文章力がアップする『魔法の〇〇集』プレゼント【無料】

【初心者でも安心】バイナリーオプションの自動攻略ツール(特典付き)

このページの先頭へ