CSSで使われる長さの単位の意味と使い分けを完全解説!
日常生活でも長さの単位は「メートル」や「ヤード」、「尺」など様々な単位があります。
CSSでも同じように長さの単位がたくさんあります。
この記事ではCSSの長さの単位の意味と使い分けの方法について解説します。
値に長さを指定するプロパティは代表的なものとして
・padding
・margin
・font-size
などがあり、非常に多くのところで使うことになるので長さの単位の意味と使い分けについてしっかり覚えていきましょう!
CSSの長さの単位の一覧
CSSの長さの単位はたくさんありますが、
その中でも使用頻度の高い単位を紹介します。
px
「px (ピクセル)」 はパソコンの画面に表示できる最小単位を1pxとするものです。
CSS以外ではディスプレイの解像度で
1920×1080と書いてあるものを見かけたことがあると思いますが、
これと同じ単位です。
非常に直感的でわかりやすいためpx単位はCSSで長さを指定するときに最も利用される単位です。
注意点としては1pxあたりの長さはディスプレイによって異なります。
自分のパソコンでは文字が大きく表示されているように見えても
ユーザーが見たときに文字が小さく見えてしまうことがある
ということには注意が必要です。
特にパソコンで文字が大きく表示されていても、スマホでは文字が小さくて見えづらい
ということはよく起こりえます。そのためスマホとパソコンでレイアウトを変更するというような工夫が必要です。
em
「em」は文字の大きさを基準とした単位で1emは1文字の大きさです。
親要素の文字の大きさを基準として指定します。
htmlタグの文字の大きさを16pxとしてmargin-bottomの値を1emとした場合、
次のようにコードを書くとmargin-bottomの値は16pxと同じになります。
<p class="main">この部分の文字の大きさとマージンは16pxです。</p>
.main {
font-size: 1em;
margin-bottom: 1em;
}
.main {
font-size: 1em;
margin-bottom: 16px;
}
この2つのコードはブラウザで見れば全く同じものです。
しかし文字の大きさを変えたいとき
emの単位を使うと全体のバランスを保ったまま文字の大きさを変えられる
というメリットがあります。
下のほうのコードだと文字の大きさだけを変えるとマージンが変わらないので全体のバランスが崩れてしまうことがあります。
なので文字の大きさと同時に長さの値を変更したい場合はemを使うとよいでしょう。
ただ欠点としてHTMLのページ構造が複雑になると1emの大きさがいろいろな値をとるためわかりにくくなってしまいます。
その場合は次のremを利用するとよいでしょう。
rem
「rem」もemと同じように文字の大きさを基準とした単位ですがhtmlタグに指定した文字のサイズを1remとしています。
hemlタグに何も書かない場合はデフォルトのサイズである16pxが採用されます。
p {
font-size: 36px;
margin-bottom: 1rem;
}
このようにfont-sizeの値を36pxにしても1remは16pxとなるのでこちらを使ったほうがわかりやすいこともあります。
%
「%」はfont-sizeプロパティに用いる場合は、emと同じように親要素の文字の大きさを基準とした単位で100%は1文字の大きさです。
使い方はemと同じように使え100%=1emとなります。
%を使った代表的な書き方としてhtmlのfont-sizeを62.5%で指定することがあります。
ブラウザのhtmlのデフォルトの文字のサイズは16pxなのでfont-sizeを62.5%にすると
16×0.625=10px
となります。htmlの文字サイズを10pxにすることで先ほど紹介したremの単位を使った文字のサイズの計算がやりやすくなります。
例えば見出しの文字の大きさを30px、
pタグの文字の大きさを14pxにしたい場合は次のように記述すればよいことになります。
html {
font-size: 62.5%;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.4rem;
}
%は文字の大きさを指定するときはemと同じように使えますが、
marginやpaddingの場合は親要素の幅を基準とした単位である
ということには注意が必要です。%はプロパティによって参照する値が異なるので自分の意図しない表示がされてしまうこともあります。
cm、mm
「cm」や「mm」はそのままセンチメートル、ミリメートルを表します。
pxはディスプレイの大きさや解像度によって1px当たりの大きさが異なりますが、
cmやmmはどのディスプレイで見ても大きさが変わりません。
marginの値を1cmとすれば実際に定規で測ったときに1cm分の余白ができるということです。
しかし、最近ではスマホのような小型のディスプレイからウェブページを見ることも多くなり、cmやmmで文字の大きさを指定することはおすすめできません。
cmやmmを使うのは印刷をするときで
実際の紙に印刷するのと同じ大きさで表示ができる
というメリットがあるので印刷用のCSSを作るときはcmとmmを使うとよいでしょう。
他にもin(インチ)やpt(ポイント)、pc(パイカ)などのディスプレイに依存しない単位がありますが、実際に使われることはほぼありません。
vw、vh
「vw」や「vh」はviewport(ブラウザで表示されている領域)を基準とした単位で
vwは幅の割合、vhは高さの割合を表します。
ブラウザで表示されている領域が幅800pxの場合、
1vwは8pxとなります。
ブラウザの表示領域を変えると文字の大きさも変わるので、文字の大きさを指定するのには向いていません。
そのかわり画面いっぱいに表示をするときや、タブレットのような向きで縦横の長さが変わるような端末で、レイアウトが崩れないように表示したい場合によく使われます。
まとめ
この記事ではCSSで利用される長さの単位について解説しました。
長さの単位はたくさんあり、これらを場合によって使い分けることでより効率的にウェブページを作成することが可能になります。