Webデザイン:オンラインリファレンス

CSSで指定できる寸法の単位

絶対指定と相対指定

文字の大きさや線の太さ,余白の空き具合など,CSSではさまざまな場面で数値による大きさの指定が行われる.この際,数値の単位として使われるものには,「絶対指定」と「相対指定」という2種類の指定方法がある.
絶対指定は,どのような閲覧環境(MacやWinなどのOS,ChromeやSafariといったブラウザ)であっても,同じように表示することができる指定方法である.一方,相対指定は閲覧環境の基本設定をベースとして相対的に指定する方法である.

絶対指定できる一般的な単位

  • pt(ポイント):Wordなどで用いられる文字サイズ指定のための基本的な単位
  • mm(ミリメートル)・cm(センチメートル):あまり使われない

相対指定一般的な単位

  • px(ピクセル):Photoshopなどで用いられる画像サイズ指定のための基本的な単位
  • %(パーセント):画面のサイズや直前の要素のサイズをベースにした単位
  • em(M-width):アルファベットの「M」の文字の幅を1とする単位.日本語では全角1文字分の幅に相当する
  • ex(x-height):アルファベットの「x」の文字の高さを1とする単位.

どちらがいいのか

絶対指定と相対指定のどちらを使うか,というのは難しい問題である.例えば,どんな閲覧環境でも全く同じデザインにしたいからといって,文字の大きさを絶対指定すると,「文字が小さいから少し大きく表示したい」と考える人にとってはその操作が妨げられることになってしまう.
実際にはいろいろな環境で試してみて,経験的に理解していくしかない.
↑インデックスに戻る←前の項目(028. idとclassの決定的な違い)→次の項目(030. font-familyプロパティ)