記事の内容
font-sizeを使い文字のサイズを調整する
基本になる文字サイズは
ブラウザなどで表示される標準の文字サイズは、CSSやstyle属性で何も指定していない場合には１６px(ピクセル)になります。
このサイズはあらゆる人が使いやすい大きさと考えられています、この１６pxを基準にサイト内でバランスの取れた見た目に整えていきます。
文字サイズの単位には相対単位と絶対単位がある
ブラウザに表示される文字の大きさはCSSで文字を指定していない場合は、ブラウザの標準の大きさの16ピクセルで表示されます、その文字を変更させるために指定する単位にはブラウザの設定や環境に依存して可変的にサイズを指定する相対単位とブラウザの設定や環境に依存せず普遍的なサイズを指定する絶対単位があります。
相対単位
相対単位とは、ブラウザの設定・環境に依存して可変的にサイズを指定する単位で、親要素の文字の大きさを基準に「何文字分」といった相対的なサイズで表示されます。
em（エム）
親要素に対してどのくらいの大きさなのか割合で示す、１emで親要素と同じ２emで親要素の倍
ex （エックスハイト）
指定しているフォントの小文字の高さを１とした単位
あまり使われない。
％（パーセント）
親要素に対してどれくらいの大きさなのか割合で示す、50%で親要素の半分の大きさ
rem（レム）
htmlタグに指定された大きさ(ルートの文字サイズを基準)に対し割合で示す、１remでhtmlで指定した大きさ、２remで倍の大きさ
px（ピクセル）
画面上の１ピクセル(小さな点)の大きさ、画面の解像度により一つのピクセルの大きさが変わる、表示される画面の仕様によって大きさが変化する。
絶対単位
絶対単位とは、ブラウザの設定・環境に依存せず普遍的なサイズを指定する、ブラウザや画面解像度が違っても表示される文字の大きさが変わらない。
in（インチ）
1インチは２．５４センチ
cm（センチメートル）
㎜（ミリメートル）
pt ポイント
72ptで１in
PC（パイカ）
1pcで12pt
この様な単位もあります
7段階あり標準サイズから一段上がると1.2倍のサイズになる
| xx-large | mediunより３段階大きいサイズで表示 |
| x-large | mediunより２段階位大きいサイズで表示 |
| large | mediumより1段階大きさサイズで表示 |
| medium | ブラウザ標準単位で表示 |
| small | mediumより1段階小さいサイズで表示 |
| x-small | mediunより２段階小さいサイズで表示 |
| xx-small | mediumより３段階小さいサイズで表示 |
| larger | 親要素より1段階大きいサイズで表示 |
| smaller | 親要素より1段階小さいサイズで表示 |
font-size フォントサイズを指定する方法
HTMLで記述する方法
文字を装飾したい要素に対して、style属性で「font-size」に文字の値を指定します、段落「ｐ」に対して各値を指定しています。
CSSで文字の大きさを変更する方法
htmlの記述の段落の文字を変更してみましょう、<p>タグにclass名「moji」を付けます。
CSSファイルに「.moji」を記述しフォントサイズを「2rem」htmlで指定している文字の大きさの2倍を指定します。
この様な表示結果になります。
まとめ
fout-size文字サイズを調整して見栄えのある文書構成を
フォントサイズを指定する方法には標準サイズを基準にサイズを決める絶対単位と親要素の単位を基準にサイズを決定する相対単位があります。
フォントサイズはメンテナンスやレスポンスを考慮すると％やem、rem単位を併用して指定するといい、px単位で指定すると一部のブラウザでフォントサイズを自由に変更できない場合があります。
フォントサイズを指定する時にブラウザはデバイスはと考えると色々な指定方法を考慮する必要が出てきます。
