CSS 【 line-height 】 ~ サイズ指定

colmun_main3571

CSSのプロパティで幅や高さを指定する場合、その値に付ける単位には、pxや%など様々な種類があります。
今回は、CSSで指定するサイズの単位についてまとめたいと思います。

目次

1.CSSのサイズ指定
2.emとex
3.基準となるもの
4.line-heightの指定
5.rem
6.em、%、px

1.CSSのサイズ指定

CSSでサイズを指定する場合、その値には、相対値と絶対値があります。

相対値

相対値は、基準になるサイズに対して相対的に決定するサイズです。
相対値で指定すると、ページを柔軟にレイアウトできます。

相対値の単位

% パーセンテージでサイズ決定
 
em フォントサイズの高さを1としてサイズ決定
 
ex 小文字「x」のフォントサイズの高さを1としてサイズ決定
(1ex = 0.5em)
rem ルート(html要素)のフォントサイズの高さを1としてサイズ決定
 
vw viewport widthの略
ビューポートの横幅の1/100を1としてサイズ決定
vh viewport heightの略
ビューポートの高さの1/100を1としてサイズ決定
vmin viewport minimumの略
ビューポートの高さか幅の小さい方の1/100を1としてサイズ決定
vmax viewport maxの略
ビューポートの高さか幅の大きい方の1/100を1としてサイズ決定
ch 半角数字「0」の幅を1としてサイズ決定
 
キーワード フォントサイズの指定には以下のキーワードも使用可能
xx-small(60%相当)、x-small(75%相当)、small(88.8%相当)、medium(100%)、large(120%相当)、x-large(150%相当)、xx-large(200%相当)
smaller や larger で上記を1段階ずつ拡大縮小することも可能
 

絶対値

絶対値は、画面サイズ等に関係なく、固定的に決定するサイズです。
絶対値の単位は、px以外はDTPで使われる単位です。
用紙のサイズに合わせてレイアウトできるので、プリント用には絶対値が適しています。

絶対値の単位

px ディスプレイ上の1ピクセルを最小単位にした値
1px = 1インチの96分の1
pt 元々DTPで使われる単位
1ポイント = 72分の1インチ = 約1.33px
pc 元々で使われる単位
1パイカ = 6分の1インチ = 12pt = 16px
in 1インチ = 約2.54cm = 96px = 72pt = 6pc
 
mm ミリメートル
 
cm センチメートル
 

▲目次へ戻る

2.emとex

emは、フォントサイズの高さを1とします。
そして、exは、小文字「x」の高さを1とすると言われていますが、実際はemの2分の1の高さを1としています。

em は、元々は大文字の「M」の高さを1としていて、それが名前の由来ともなっているようですが、実際は、書体の枠の高さを1としている印象です。
日本語(マルチバイト文字)やアルファベットのMは1emの高さに納まっていますが、アルファベットの g、p、q、yや、フランス語のような記号付きの文字は、はみ出ます。これは文字バランスを保つために必要なバラツキです。

フォントサイズ50pxの場合う、1em = 50pxになります。
同じフォントサイズで0.3emにすると、0.3em = 15pxです。

ex は em の2分の1なので、1ex = 0.5em と換算できます。
line-height: 1ex と line-height: 1.5em とは同じ結果となります。
exよりもemの方が広く使われているので、フォントとの関係でサイズを指定したい場合に、特に問題がなければemに統一して使った方が良いと思います。
サイズのイメージも持ちやすいです。

▲目次へ戻る

3.基準となるもの

相対値は、使う機会が多いですが、単位によって何を基準にした相対値かが違うので、慣れるまでは注意が必要です。

相対値の単位の中で、使用頻度が特に高いのは、emと%です。
emと%について、次のようなものが、相対値を決定する際の基準となります。

プロパティ 相対値決定の基準となるもの
font-size
(フォントサイズ)
親要素のフォントサイズが基準(em、%、共通)
line-height
(行の高さ)
自分自身のフォントサイズが基準(em、%、共通)
margin 、padding 、
width 、height
emは、自分自身のフォントサイズが基準
%は、親要素のボックスサイズが基準

margin 、padding 、width 、heightプロパティでの%の指定が要注意です。
例えば、0.3em = 30% の認識で「padding: 30%」と指定すると、実際は親のボックス幅に対しての30%なので、イメージと全然違う次のような表示となります。

フォントサイズは全て16pxです。

ブルーが「padding: 0.3em」で指定したエリアです。

ピンクが「padding: 30%」で指定したエリアです。

ソースは次の通りです。

(CSS)
div#sample {
font-size:16px;
border:solid 1px #ccc;
padding:0;
margin:0;}
div#sample p#em {
background:#31A9EE;
margin:1em;
padding:0.3em;}
div#sample p#per {
background:#FF9696;
margin:1em;
padding:30%;}

(HTML)
<div id=”sample”>
フォントサイズは全て16pxです。
<p id=”em”>
ブルーが「padding: 0.3em」で指定したエリアです。
</p>
<p id=”per”>
ピンクが「padding: 30%」で指定したエリアです。
</p>
</div>

▲目次へ戻る

4.line-heightの指定

line-heightプロパティは、行の高さを指定します。

line-heightは、emや%など相対値で指定する方が良いです。
後でフォントサイズを変更する場合などに、line-heightが相対値で指定されていれば自動的に行の高さが調整されるので、絶対値で指定する場合に比べて作業の手間が軽減されます。

フォントサイズ50px、line-height(行の高さ)1.6emで指定した場合、次のような表示になります。

background:#FF9696
font-size: 50px
line-height: 1.6em

ソースは次の通りです。

<p style=”font-size:50px; line-height:1.6em; background:#31A9EE; padding:0;”>
<span style=”background:#FF9696;”>
background:#FF9696<br>
font-size: 50px<br>
line-height: 1.6em
</span>
</p>

フォントサイズが50pxで、line-height が1.6emの場合、line-height = 80px です。
line-height:160% と指定した場合も同じ表示結果となります。

上の表示で確認できますが、line-heightは、文字の上と下に均等に間隔が付きます。
行間は 80 – 50 = 30px ですが、文字の上に15px、下に15pxずつ付いています。

▲目次へ戻る

5.rem

相対値でよく使う em や % の、基準がフォントサイズの場合、そのフォントサイズとは、html要素のフォントサイズのことです。
レイアウトするときは body要素ばかりに目が行ってしまいますが、body要素とhead要素を囲んでいるhtml要素が基準(ルート)です。

html要素のPCブラウザでのデフォルトフォントサイズは、font-size : 16pxです。
どのPCブラウザでもこれがデフォルトです。
因みに、line-height : 24px(1.5em)もデフォルトです。

ですので、body要素に font-size:1em と相対値で指定すると、フォントサイズは16pxとなります。
そして、1em = 16px = 100% = 12pt = 1rem となります。

このremは、CSS3からの新しい単位で、ルートの emという意味です。

rem を使うと、親のフォントサイズはスルーして、ルートであるhtml要素のフォントサイズを基準にします。
body要素やその子孫たちがどんなフォントサイズを指定していても、remを使えば、その要素に、ルートを基準にした指定をすることができます。
(remは IE9 以降から対応しています。)

▲目次へ戻る

6.em、%、px

サイズの単位でよく使うのは、em、%、pxです。
通常のレイアウトは、たいてい em、%、px でこと足ります。
それぞれの性質を理解して、使い分けできると、スムーズにレイアウトが指定できます。

●emは、フォントサイズを基準に相対指定したい場所に使います。
●%は、主にボックスサイズを基準に相対指定したい場所に使います。
●pxは、何にも影響されずに固定サイズを決めたい場所に使います。

em

フォントサイズが変わると影響を受ける部分には、emが適しています。
フォントに関するサイズを絶対値で指定すると、後々混乱する可能性が高いです。
font-size や line-height(行の高さ)、ボックスの padding や marginなど、フォントサイズの変更によって調整が必要になりそうな場所は、emで相対指定するのがベストです。

%

ボックスのサイズ指定(特にwidth)をする際には、% をよく使います。
例えば、親要素に対して左右いっぱいにしたいボックスは width:100% で指定します。

レスポンシブレイアウト(ウィンドウサイズによってサイトの幅が可変する)でも、%はよく使います。

その他、フォントサイズも%を使った方が便利な場合があります。
emよりも%のほうが表示をイメージしやすいです。

px

フォントサイズ・ボックスサイズに関係なく、サイズを固定したい場所には、pxを使います。
borderの幅(border-width)を指定する場合には、pxをよく使います。
border-radius(ブロック要素の角丸)も、正円や楕円形の場合(50%)以外は px で指定することが多いです。
サイトのメインボックスの幅を px で固定する場合もあります。
デザイン上、サイズを固定したい部分も px で指定します。

但し、pxを使うと、PCで表示する場合はOKだったけど、スマートホンやタブレットで表示する場合は、画面サイズが違うので、調整が必要となります。
ですので、むやみに px を使うと後が大変です。
サイズ指定は、なるべく相対値(em や %)を使い、どうしても必要な場所だけ絶対値(px)を使う、という使い分けも大事です。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です