スタイルシートの技

スタイルシートで良く使われる単位

スタイルシートでは幅や長さと行ったものを指定する際には単位が必要となります。 単位を省略するとだいたいはピクセルとなります。単位は以下のものが利用可能です。

  • mm (ミリメートル)
  • cm (センチメートル)
  • in (インチ) / 1in=2.54cm
  • 1pt (ポイント) / 72pt=1in
  • 1pc (パイカ) / 1pc=12pt

今、紹介したのは絶対的な単位であり、固定です。 では相対的な単位とは… 例えば、1文字の大きさだけの幅にしたいというような場合も出てきます。 そのような場合には「em」という単位を使います。 基準はアルファベットで一番長い「m」の横幅となっています。 また、フォントの大きさによってこの大きさも変化します。

「ex」という単位はアルファベットの「x」の高さを単位とします。

「px」(ピクセル)も相対的な単位です。 画面の解像度が変われば1ピクセルの長さも変わります。 画像1ドット分の幅が1ピクセルです。

例外としては「%」(パーセント)もあります。 例えば、ある領域とある領域を半分づつにしたい…という時には、 同じ幅を記載しても良いですが、全画面表示などで領域の幅が変わった時に固定長となります。 しかし、「50%」と書けば、領域の幅が変わっても自動的に検知して幅が変わります。

結論から言いますと、最も良く使われているのは「px」と「em」です。 段落の先頭を1文字開けるような場合には「1em」という単位を使った方が良いでしょう。 「px」だとブラウザによってはフォントサイズの定義が違う場合がありますが、 そのような場合でも対応できるからです。「px」は画像の位置などを微妙に調整したりする時に便利です。