サイズ指定の単位

• 絶対的指定
• px
Webページを閲覧する環境（OSやブラウザ）が変わろうとも、指定されたサイズで固定表示されます。そのため、場合によっては表示が小さすぎたり大きすぎたりすることがあります。

• 相対値指定
ある基準をもとに倍にするとか半分にするといった相対的な書き方をします。環境に応じた基準をもとに表示されるため、どんな環境でも適切な大きさで表示されるという違いがあります。スマートフォンで閲覧した場合にはそれに適した大きさで表示され、PCで閲覧した場合にはそれに適した大きさで表示されます。ここでは3つの単位をご紹介します。3つの単位の違いは基準です。
• em
基準は親要素のfont-sizeです。親要素のfont-sizeは、その時のスタイルシートの設定など状況によって異なります。
• rem
基準はルート要素のfont-sizeです。remの頭のrはルートのrです。ルート要素とはhtml要素のことです。Google Chromeのデフォルトスタイルシートでは、16pxに設定されています。
emは、基準を直近の要素においている。remは、基準をそのドキュメントに置いている。と捉えることもできるかと思います。
• %
指定するプロパティによって基準が変わります。予期せぬ結果になることがありますので、注意が必要です。例えば、font-sizeの場合は親要素のfont-sizeが基準になります。marginやpaddingの場合は、親要素の幅（width）が基準となります。line-heightのような行の高さを指定するプロパティの場合、自要素（自分自身）のfont-sizeが基準になります。また、場合によってはブラウザによっても結果が変わることがあり得ますので、要注意です。

フォント・行

font-size

主要な値

解説

• 相対値指定
• em
基準は親要素のfont-sizeです。
このような親子関係があり、親の要素が20pxだった場合
p要素のスタイルシート、
は30pxになります。
• rem
基準はルート要素のfont-sizeです。の場合、デフォルトだと16pxの2倍、32pxになります。
• %
font-sizeプロパティの % 指定時の基準は親要素のfont-sizeになります。
このような親子関係があり、親の要素が20pxだった場合、
p要素のスタイルシート、
は、基準の80%である16pxになります。

• 絶対値指定
• px
基準はなく固定値で書きます。指定されたサイズ固定で表示されます。

font-style

主要な値

解説

• italic
文字スタイルを筆記体にします。
文字のスタイル italic

• oblique
文字スタイルを斜体にします。
文字のスタイル oblique

text-decoration

主要な値

解説

• underline;
文字の下に線がつきます。

• overline;
文字の上に線がつきます。

• line-through;
文字に打ち消し線をつけます。訂正した、という形跡を残しておきたいような場合に使います。 Webに間違った情報を上げてしまったような場合、いきなりその内容を削除してしまうのではなく、訂正をしたという形を残しておくのが相応しい場合があります。
例えば、HTMLのdelタグなどのスタイルに使う方法があります。
打ち消し線を適用した文章

text-indent

主要な値

解説

• 相対値指定
• em
基準は親要素のfont-sizeです。スタイルシートの設定にもよりますが、子要素は親要素のfont-sizeを引き継ぎますので、の場合、余白はおおよそ一文字分になります。



• rem
基準はルート要素のfont-sizeです。text-indent: 0.5remの場合、デフォルトでは16pxの半分である8pxのインデントが設定されます。



• %
text-indentプロパティの % 指定時の基準は親要素の幅（width）になります。
親の要素の幅が100pxだった場合、インデントは30pxになります。

• 絶対値指定
• px
基準はなく固定値で書きます。指定されたサイズ固定で表示されます。

text-align

主要な値

解説

• left
ブロックレベルの中のインライン要素を左揃えにします。

• center
ブロックレベルの中のインライン要素を中央揃えにします。

• right
ブロックレベルの中のインライン要素を右揃えにします。

line-height

主要な値

解説

• 相対値指定
• em
基準は親要素のfont-sizeです。の場合、行の高さは2文字分になります。



• rem
基準はルート要素のfont-sizeです。の場合、デフォルトだと16pxの2.5倍の40pxになります。
• %
line-heightプロパティの % 指定時の基準はその要素のfont-sizeになります。
200%を指定した場合、行の高さは2文字分になります。

• 絶対値指定
• px
基準はなく固定値で書きます。指定されたサイズ固定で表示されます。

サンプルコード