HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎21. サイズの単位(px、%、em)

      2017/07/11

サイズに使用できる単位

サイズ単位には下記のものが使えます。CSS3からは単位の種類が増えていますが、すべてのブラウザで使えるわけではありません。ここではすべてのブラウザで利用できるCSS3で追加される前の単位を紹介します。

単位 名称 CSSでの記述例
px ピクセル 600px
% パーセント 80%
em エム、イーエム 1.2em

px(ピクセル)とは

HTML、CSSの基本単位です。ピクセルとはモニタ画面を構成している粒のことです。ピクセルはcmやmmと違い、モニタの解像度の変更によって表示サイズが変わります。自身の使用しているモニタの解像度は下記の方法で確認できます。画面解像度は、そのままモニタの横、縦のピクセルの総数を表しています。

Windowsの画面解像度の確認

デスクトップを右クリック→画面の解像度
Windowsの画面解像度

Macの画面解像度の確認

環境設定→ディスプレイ→解像度の変更
Macの画面解像度

WEBサイトを作成する場合は900〜1000pxに内容が収まるように設計するケースが一般的です。内容はテキストなど重要な部分のことで背景などは横いっぱいに表示させる場合があります。小数点の入った値はブラウザによって値を切り捨てたり四捨五入したりと桁数が変わるため、なるべく使用しないようにしましょう。

%(パーセント)

%は親要素のサイズからの相対値です。例えば親要素の幅が1000pxの場合、子要素の幅を50%で指定すると500pxと同じことになります。親要素と同じ場合は100%です。注意点として高さはそのまま%で指定しても相対値がでません。高さは要素内の内容で算出されるからです。

em(エム)

親要素の文字サイズからの相対値です。つまりサイズを何文字分として算出するサイズです。例えば親要素の文字サイズが20pxの場合、子要素の文字サイズを0.5emで指定すると10pxと同じになります。親要素と同じサイズは1emです。

親要素からのサイズの継承(%、em)

%、emは親要素のプロパティのサイズを継承します。%、emは親のサイズの相対値で指定する値です。親要素のサイズが変更されると子要素のサイズも変化します。親要素と同じサイズを指定する場合は100%、1emとなります。親より小さくする場合は90%、0.9emと小さく指定します。親より大きくする場合は110%、1.1emと大きく指定します。

HTMLのwidth属性とheight属性で指定する場合

width属性やheght属性ではピクセルと%が使用できます。注意点としてピクセルで指定する場合は数値のみで単位をつけません。%で指定する場合は単位をつけます。 width属性とheight属性は必至属性ではありません。基本的に幅、高さはCSS側で指定するもので属性では指定しません。ただしimg要素iframe要素など一部の要素はwidth属性、heigit属性を指定することで表示スピードが改善されるため指定します。

CSSに使用できる単位

px、%、emが使用できます。HTMLと違いピクセルで指定する場合は単位(px)が必要です。CSS3からは上記以外の単位が使えるようになっていますが、ブラウザによってサポートされていないものがあるので注意してください。

まとめ

  • HTML、CSSで使える単位としてpx、%、emがある。
  • HTMLでピクセルを使用する場合は単位(px)をつけない。
  • %, emは親要素からの相対値となる。

 - HTML・CSS