【CSS】サイズ指定に使う単位はどれが最適か|em・%・px・vwなどなど

Code

CSSでサイズ指定に使う単位といえばpxやem、%などがありますが、なんとなく使ってしまいがちなので、一度整理してみたいと思います。

絶対的な長さの単位と相対的な長さの単位の使い分けや、それぞれの単位の意味を解説します。

CSSにおける主な長さの単位の一覧

まずはどんな単位があるのかざっと一覧してみましょう。ここでは、よく使われる単位だけ取り上げています。

単位意味
px1/96インチ
%※プロパティによって基準が異なる
emその要素のフォントサイズの○倍
remルート要素のフォントサイズの○倍
vwビューポートの幅の○%
vhビューポートの高さの○%
vminビューポートの小さい側の○%
vmaxビューポートの大きい側の○%

長さの単位の使い方

長さ(サイズ)の値には必ず単位をつけます。ただし、値が「0」の時は単位をつける必要はありません。(つけても構いません。)

「font-size: 20;」とか書いても認識されません。「そこはpxでしょ!推して知れ!」とか言っても無理です。

単位は大文字小文字区別しませんので、1PXや5REMなどと書いても大丈夫です。書いてる人見たことありませんが。

単位は数値の直後につけます。間に空白を挟んではいけません。

絶対的な長さの単位【px】

CSSで絶対的なサイズ指定といえばpx(ピクセル)ですね。他にもptやpc、cm、mmなども使えますが、使うとしたら印刷用のスタイルシートくらいでしょう。

ここでは絶対的な長さの単位=pxとして話を進めます。

px単位のメリット

pxを使えば「この要素のフォントサイズは16px」「ここの要素間の余白は50px」といった感じで分かりやすくなります。

コーディングの際に%やemに換算する必要はありませんので、サクサク進みます。

px単位のデメリット

標準的で分かりやすいpxですが、柔軟性に欠けるのが弱点です。

たとえば全要素のフォントサイズをpxで指定していた場合、「やっぱり全体的に文字サイズ一回り大きくするよ~」となった時に泣きます。emや%を使っておけば、ルートのフォントサイズ変えるだけで済んだのに…

もっと悲惨なのは、要素の幅や余白を文字サイズに合わせてpx指定していた場合、「やっぱ文字サイズ大きくするから、余白も広くして」とか言われたら泣きます。

さらには、ブレークポイントごとにpx値を変えただけの同じようなコードが延々と繰り返されていくCSSを書くのは辛いですし、なによりメンテナンスで泣きます。

あと、フォントサイズをpx指定で固定すると、ブラウザの文字サイズ設定が効かないのでアクセシビリティ上の問題にもなり得ます。

と、デメリットを挙げてみたものの、ブログのような小規模サイトならpxで決めていったとしても、さして困ることはないでしょう。

なので、気にせずにバンバン使っても問題ありません。たぶん。

でも、絶対的なサイズと相対的なサイズを使い分けた適切なサイズ指定でレイアウトされたWebサイトは美しいです。

px指定の使いどころ

ここはサイズを固定したい!というところで使います。

たとえば固定ヘッダーの高さ、サイドバーの幅、コンテンツ領域のMAX幅とか、あとボーダーの太さも……結構使ってますね。

絶対的な長さ単位は、印刷など固定サイズの媒体用のスタイルシートにも向いています。

ただし、その場合はpxよりptやmmを使ったほうが分かりやすいでしょう。

相対的な長さの単位

emや%などは、基準となる長さに対する倍率やパーセント値を表わしていて、相対的なサイズ指定となります。

何が基準になるかは、その単位あるいはプロパティによって決まります。フォントサイズや親要素の幅など色々です。

相対的なサイズ指定のメリットは、px単位のデメリットとして挙げた問題を解決できること。

相対的なサイズを使うことで、柔軟なレイアウトが可能になり、すっきりしたメンテナンスしやすいコードが書けます。

主な単位を説明していきます。

【%】プロパティによって基準が違う

%は、厳密には長さの単位ではなく、パーセント値という特殊な数値に付けられる単位です。

プロパティによって基準が異なるし、border-widthのように%値を使えないプロパティもあります。

さまざまなプロパティで活躍する単位ですが、正しく理解してきちんと使いたいところです。

%値の基準一覧(代表的なプロパティのみ)

よく使う%値のざっくりした一覧を作ってみました。

プロパティ基準
font-size親要素のフォントサイズ
width
margin
padding
left
right
親要素の幅
height
top
bottom
親要素の高さ
border-radius
translate
その要素の幅や高さ
border-width※使えない

上下の余白も幅が基準になっている点に注意

マージンやパディングは親要素の幅に対する%値なので、上下のマージンやパディングも親要素の高さではなく幅で決まります。

感覚的には何か違うような気もしますが、慣れると、これがしっくり来ることが分かります。

【emとrem】フォントサイズ基準

emとremは、フォントサイズを基準とした長さの単位です。

em

em単位の基準となるのは、その要素のフォントサイズ。

その要素のフォントサイズが10pxなら、1.5em = 15pxとなります。

テキストとのバランスが大事な、余白やボタンサイズなどの設定に向いているといえるでしょう。

フォントサイズをemで指定する場合は、親要素のフォントサイズに対する相対値になります。

ちょっと紛らわしいので、フォントサイズの指定には%かremを使うと分かりやすくなるかと思います。

rem

remは、ルート要素のフォントサイズに対する相対値です。要するに、html要素のフォントサイズの○○倍という意味。

フォントサイズにおいて、emや%は親要素に依存するため、階層の中で繰り返し使うと訳の分からないことになります。

そこで、親要素に依存することなく相対的なサイズを指定できるremが活躍するというわけです。

【vwとvhとvminとvmax】ビューポート基準

vw・vh・vmin・vmaxはビューポートのサイズを基準とした長さの単位です。

要するに、ブラウザのウィンドウサイズの幅や高さに対して何パーセントか、という意味。

画面の幅や高さに合わせて流動的にサイズが変わるデザインで活躍します。

viとvbもあるけど、まあいいや。

vw

vwはビューポートの幅に対するパーセント値です。

たとえば、ビューポートの幅が1920pxなら、1vw = 19.2px になります。

基準となる長さにはスクロールバーの幅も含まれているので、画面いっぱいのサイズを意図して100vwに指定すると、スクロールバー分はみ出すことになるので注意。

vh

vhはビューポートの高さに対するパーセント値です。

たとえば、ビューポートの高さが1080pxなら、1vh = 10.8px になります。

vmin

vminは、ビューポートの幅と高さの小さい方に対するパーセント値です。

たとえば、ビューポートの幅が1920px、高さが1080pxなら、1vmin = 10.8px になります。

vmax

vmaxは、ビューポートの幅と高さの大きい方に対するパーセント値です。

たとえば、ビューポートの幅が390px、高さが844pxなら、1vmax = 8.44px になります。

【calc】で異単位間交流をしよう

calc関数の中では、異なる単位の値どうしの計算が可能です。

サイドバーの幅を300px、メインセクションの幅をcalc(100% – 300px)にするとか。

まとめ

それぞれの単位の意味を理解し、いつでも最適な単位でサイズ指定したいものですね。

コメント

タイトルとURLをコピーしました