CSSには様々な単位があり、使い方も結構ややこしいです。
ということで今回は、CSSに出てくる様々な単位について解説していこうと思います。
実践ではほとんど使われない単位は省き、主要な単位だけを解説します。
単位は絶対単位と相対単位に分類される
CSSにおける単位というのは、絶対単位と相対単位に分類されます。
例えば、mm（ミリメートル）。CSSでmmを使うことはほとんどありませんが、指定することができます。
1mmはどんな環境でも1mmです。このような単位を絶対単位と呼びます。
逆に、emという単位は親要素のフォントサイズによって大きさが変化します。このような単位を相対単位と呼びます。
「絶対単位」「相対単位」という言葉を覚える必要はありませんが、意味だけは頭に入れておきましょう。
px（ピクセル）
px（ピクセル）は絶対単位です。
pxは親要素の影響を受けません。
例えば以下のようなコードがあったとしましょう。
<div class="box">
<p class="text">テストテスト</p>
</div>body {
font-size: 16px;
}
.box {
font-size: 12px;
}
.text {
font-size: 30px;
}bodyには16pxが指定されていますが、.textには30pxを指定しています。
bodyや親要素には関係なく、30pxで表示されます。
pxはbodyや親要素の影響を受けないので、分かりやすいです。
ただし、スマホやタブレットで文字サイズを変更したい時は、一つ一つ変更しなくてはいけないので面倒です。
また、pxを使用するとブラウザの文字サイズ変更機能が使えなくなるなどのデメリットもあります。
em
emは親要素のフォントサイズによって大きさが変化します。
例えば、以下のようなHTMLとCSSがあったとします。
<body>
<div class="box">
テスト
<p class="text">テストテスト</p>
</div>
</body>/* ブラウザのデフォルトの文字サイズは16px */
.box {
font-size: 1.2em; /* 16px × 1.2 => 19.2px */
}
.text {
font-size: 1.2em; /* 19.2px × 1.2 => 23.04px */
}.box の1.2emというのはブラウザのデフォルト値16pxを1.2倍した値になります。
16px × 1.2 => 19.2px
.boxのフォントサイズが19.2pxだったので、その子要素に1.2emを指定すると、
19.2px × 1.2 => 23.04px
という値になります。
ブラウザのデフォルトのフォントサイズは16pxなので、bodyで16pxを指定しないで大丈夫です。
この例では、pxを一切使用していないので、ブラウザで文字サイズの変更をするとそれが反映されます。
emは文字のサイズだけではなく、「〇〇文字分の横幅」を要素に指定したい時にも便利です。
4emなら、ちょうど4文字分収まる横幅ということになります。
また、文字周りのpaddingやmarginをemで設定しておくと、文字サイズに応じて余白が調整されるのでおすすめです。
emには弱点があり、HTMLの構造が複雑になると、どの要素の文字サイズが、どの子要素の文字サイズに影響を与えるか分かりにくくなるという点です。
それを解決できるのが、remという単位です。
rem
remは親要素のフォントサイズに関係なく、htmlのフォントサイズ、もしくはブラウザのデフォルト値（16px）を基準に計算されます。
例えば、以下のようなHTMLがあったとします。
<body>
<div class="box">
テスト
<p class="text">テストテスト</p>
</div>
</body>そして、CSSを以下のように指定します。
html {
font-size: 20px;
}
.box {
font-size: 1.2rem; /* 20px × 1.2 => 24px */
}
.text {
font-size: 1.2rem; /* 20px × 1.2 =>24px */
}.textの中にある文字は、.boxの文字サイズの影響を受けません。これがemとの違いです。html要素の指定された値を基準として計算されます。
htmlに特に指定がない場合は、ブラウザのデフォルトである16pxが基準になります。
/* htmlに指定がない場合 */
.box {
font-size: 1.2rem; /* 16px × 1.2 => 19.2px */
}
.text {
font-size: 1.2rem; /* 16px × 1.2 => 19.2px */
}いかがでしょう。remは割と簡単ですね。htmlにpxを指定しなければ、ブラウザの設定で文字サイズを変更することもできます。
％（パーセント）
パーセントは簡単なようでちょっと難しい単位です。
文字に使う場合は簡単で、emと同じような使い方になります。
<body>
<div class="box">
テスト
<p class="text">テストテスト</p>
</div>
</body>パーセントを使うと以下のようになります。
/* ブラウザのデフォルトの文字サイズは16px */
.box {
font-size: 120%; /* 16px × 120% => 19.2px */
}
.text {
font-size: 120%; /* 19.2px × 120% => 23.04px */
}
marginとpaddingのパーセントについて
marginとpaddingで％（パーセント）を使う時は注意が必要です。
以下の図をご覧下さい。
横方向のmarginはもちろんですが、縦方向のmarginも親要素の幅が基準になります。親要素の高さ（height）は関係ありません。
これはpaddingも同様です。
left,right,top,bottomのパーセントについて
position: absoluteやrelativeを使うとtopやleftなどのプロパティが使用できます。
これらでパーセントを指定すると、
left,rightのパーセントは親要素の幅が基準となり、
top,bottomのパーセントは親要素の高さが基準となります。
marginに比べると分かりやすくて使いやすいです。
計算ができるcalc
単位とは違いますが、calcを使うと計算を行うことができます。
例えば、以下のようなHTMLがあったとします。
<div class="container">
<div class="content"></div>
<div class="sidebar"></div>
</div>そして、以下のようなCSSを指定します。
.container {
display: -webkit-flex;
display: flex;
}
.content {
width: calc(100% - 200px);
height: 1000px; /* 通常ここは不要 */
background-color: #eee;
}
.sidebar {
width: 200px;
background-color: #bbb;
height: 1000px; /* 通常ここは不要 */
}こうすると、.contentの横幅は(100% – 200px)になります。
つまり、サイドバーの200px横幅分引いた分が横幅になり、ウィンドウサイズに応じて.contentの幅が変化するのです。
このように、一方は固定の幅、一方は可変の幅にする時にcalcは真価を発揮します。
他にも、このような使い方もできます。
<ul class="list">
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>.list {
display: -webkit-flex;
display: flex;
width: 500px;
}
.list li {
width: calc(100% / 3);
}こうすることで、liの横幅がちょうど3分の1になります。
超便利ですね。
calcの注意点
calcはとても便利ですが、IEで不具合が出ることがあります。
IEに対応しなくてはいけない案件の場合は、動作チェックを忘れない様にしましょう。
まとめ
単位は色々あってややこしいかもしれませんが、一通り覚えておくと便利です。
レイアウトを効率よくできるように、使い方を覚えておきましょう。
他にもこんな記事があります。
全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG
WEBデザインの勉強におすすめの書籍、入門書の紹介 | SHIROMAG
最近のコメント