継続は力なり＃５
テキスト関連のプロパティ
テキスト部分のフォントを制御するプロパティ
（フォントサイズ・行の高さ・フォントの種類・太字・斜体）
font-size プロパティ
フォントサイズの指定
さまざまな値(pxなど)が指定できる（初期値は「medium」で、標準フォントサイズ）
・単位付きの実数
フォントサイズを単位付きの実数で指定
例・16px など
・パーセンテージ
親要素のフォントサイズに対する「%」で指定
例・実数直後に「150%」などをつけて指定
・xx-small・x-small・small・medium・large・x-large・xx-large
７種類のキーワードで指定
xx-smallが一番小さく、mediumが標準、xx-largeが一番大きい
（表示サイズはブラウザによって異なる）
・smaller・larger
親のフォントサイズに対して、１段小さく(saller)または大きく(larger)する
CSSで使用する単位
主に使われるもの
・px→ピクセル
・em→その要素のフォントサイズを１とする
font-sizeプロパティでの使用とそれ以外の仕様では意味が異なる
font-sizeプロパティ以外では「その要素のfont-sizeプロパティの値を１とする単位」
font-sizeプロパティでは「親要素のfont-sizeプロパティの値を１とする単位」
・rem→html 要素のフォントサイズを１とする
html要素のフォントサイズを１とする
html要素（通常はブラウザの環境設定で設定されてるフォントサイズ）
line-height プロパティ
行の高さを指定できる
次のものが指定できる（初期値は「normal」）
・実数
単位をつけない実数（1.5）などで指定
行の高さはここで「指定した実数」と「フォントサイズ」を掛けた高さになる
・単位付きの実数
単位付きの実数（24px)などで指定
・パーセンテージ
フォントサイズに対する「%」（150％）などで指定
・normal
ブラウザ側で妥当だと判断する行の高さに設定する
（ブラウザによって表示結果は異なる）
※「単位をつけない実数」での指定と「emや%」での指定では違いが生じる
CSSのプロパティには
・表示指定をその要素だけに適用するもの
・内部に含まれる要素にも適用するもの
がある
例
body要素に「font-size」を指定すると、body要素の中の「h1」や「p要素」にも適用されるが、「background-image」で背景画像を指定しても、「h1」や「p要素」には適用されない
line-heightは内部要素にも適用される
CSSでは指定された値を内部の要素に適用する場合
指定された値をそのまま適用するのではなく「計算結果の値」を適用する
例
フォントサイズが10pxの要素に対して
「line-height: 1.5em;」や「line-height: 15%;」を指定すると
内部要素で適用されるのは計算結果の「15px」となる（1.5emや150%ではない）
この場合、内部のフォントサイズが全て同じ場合は問題ないが
内部のフォントに30pxのテキスト（指定より大きいテキスト）がある場合
行の高さが15pxに収まらずはみ出して他の行と重なってしまう
無理に単位で指定しようとすると、対応出来な気なくなるため
「単位をつけない実数」を使う
「単位をつけない実数」に限り、計算結果ではなく、「単位をつけない実数」をそのまま内部要素に適用する
よって上記の例でも、30pxのテキストでも行の高さは「15px」ではなく「45px」になるため、テキストがはみ出ることがない
この様な理由で「line-height」には多くの場合「単位のない実数」が指定される
例：以下のHTMLに対し
<body>
<h1>
これはh１要素です。フォントサイズは30ピクセルです。
</h1>
<p>
これはp要素です。
</p>
</body>以下のCSSを指定
body {
font-size: 10px;
line-hright: 150%;
}
h1 {
font-size: 30px;
}この様に指定すると文字が重なってしまうため
※「line-height: 150%;」の部分を「line-height: 1.5;」とする