長さ単位の基本

web

スタイルシートでは様々なサイズ指定の単位が用意されています。 それらを大まかに分類すると、相対単位と絶対単位に分けられます。 2つの違いと各種単位について学びましょう。

相対単位と絶対単位

相対単位(px,%など)はピクセル数や要素の幅などの基準サイズに対して相対的な長さになります。誤解を恐れずに言えば、画面サイズが変われば長さが変わる単位です。

対して絶対単位(mm,cmなど)は実際の長さで表示されます。PCの大画面で見てもスマートフォン画面で見ても、絶対単位で指定すればその大きさで表示されます。

代表的な単位
単位 読み方 説明 相対/絶対
px ピクセル ディスプレイの解像度に依存する 相対単位
% パーセント 要素や幅などに依存する
em em フォントの高さを1とする
cm センチメートル 絶対単位
mm ミリメートル
in インチ 1インチ = 25.4mm

通常のサイト製作では相対単位を使用します。もっと言えば大抵ピクセル(px)を単位として使用します。ピクセルは画面の解像度を基準とするサイズなので、環境が違えば少々のサイズずれは起こります。しかし画面の解像度からサイトのサイズを調整してくれるので、想定外のレイアウトになる事はほぼありません。

特に近年はPC、タブレット、スマートフォンなどクライアント側の環境も様々なので、基本的に相対サイズを使いましょう。 ただし絶対単位の出番がない訳ではないです。例えば設計書や印刷物などは絶対単位の方が向いている点が多くあります。状況に合わせて最適なサイズを採用しましょう。

CSSでのサイズ指定

サイズはこのように指定します。

{font-size : サイズ;}

小数点以下のみの場合、0を省略することができます。 下の2つの指定は同じ内容です。

{font-size : 0.5em;}
p{font-size : .5em;}
eyecatch

ウェブサイトを作るのに必要な言語

eyecatch

インターネット入門‐そもそもインターネットって何?

ウェブサイトの記事

eyecatch

サイトのPV数を増やす3つの基本

eyecatch

SSL/TLS・SSL証明書・認証局とは

eyecatch

robots.txtと書き方

eyecatch

スマホサイト製作のTIPS

eyecatch

紙文書がインターネットになるまで

eyecatch

サイドバーのメリット・デメリットとサイドバー不要論

ウェブサイトの記事一覧HOME