font-sizeについてのまとめ

個人的には`px`しか使いたくないが、いろいろメモ

# font-sizeで使うことができるサイズ

## px

font-sizeを絶対に指定するためのもの
環境によってfont-sizeが変更されることなし
`font-size: 16px;`は16pxで表示される

```css
body { font-size:10px; } /* 10px */
p  { font-size: 16px; } /* 16px */
li { font-size: 16px; } /* 16px */
li p { font-size: 16px; } /* 16px */
```

## em
親要素の文字サイズに基いて自身を1とする単位
MacintoshやWindowsなどの使用している環境によって大きさが変化する
（htmlの`<em>`タグとは関係なし）
基本的には`font-size: 1em;`で16pxが表示される。
（bodyなどの親要素で`font-size: 12px;`などで指定していた場合、そのサイズが`font-size: 1em;`で適応される）

```css
body { font-size:10px; } /* 10px */
p  { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */
li p { font-size: 1em; } /* 16px */
```

## rem
基本的な使い方は`em`と同じ。
基本的には`font-size: 1rem;`で16pxが表示される。
`em`は直近の親要素から取得されるが`rem`は最上位の要素(html要素)を基準にしてfont-sizeを取得する

```css
html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */
p  { font-size: 1.6rem; } /* 16px */
li { font-size: 1.6rem; } /* 16px */
li p { font-size: 1.6rem; } /* 16px */
```

### remの対応状況

![スクリーンショット 2018-08-12 23.39.54.png (75.6 kB)](https://img.esa.io/uploads/production/attachments/4290/2018/08/12/34850/be0c1532-a8f4-472a-b2c7-f78ae87432e4.png)

[CSS３やHTML５のブラウザ対応状況](https://caniuse.com/#feat=rem)

### pxを入力するだけでremを取得することができるchromeの拡張機能
[PxtoRem -chromeストア](https://chrome.google.com/webstore/detail/pxtorem/ldbemkmafmibhpncgagpegmhbhpolnlp/related)

[PxtoRem -簡単な使い方](https://coliss.com/articles/browser/chrome/convert-pixel-units-to-rem.html)

## %
基本的な使い方は`em`と同じ。直近の親要素から取得を行う。
基本的には`font-size: 100%;`で16pxが表示される。

[%の対応表参考サイト](http://webtech-walker.com/archive/2008/05/16032443.html)
親要素が12~16pxまでの%表記が記載されている。

## vw,vh,vmin,vmax

`vw` : 相対指定。ビューポートの幅の何パーセントか。

`vh` : 相対指定。ビューポートの高さの何パーセントか。

`vmin` : 相対指定。ビューポートの「幅か高さの短い方」の何パーセントか。

`vmax` : 相対指定。ビューポートの「幅か高さの長い方」の何パーセントか。

### vwを指定した場合のfont-size参考
iphone5(width 320px)の場合を想定

| px | vw |
| --- | --- |
| 10px | 3.125vw |
| 11px | 3.4375vw |
| 12px | 3.75vw |
| 13px | 4.0625vw |
| 14px | 4.375vw |
| 15px | 4.6875vw |
| 16px | 5vw |

これだけみてもよく意味がわからなかったので、参考のコード・結果も。。。

### vw,vh,vmin,vmaxの参考コード
<iframe height='265' scrolling='no' title='font-size vh vw' src='//codepen.io/miwashutaro0611/embed/NBJWxr/?height=265&theme-id=dark&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/miwashutaro0611/pen/NBJWxr/'>font-size vh vw</a> by miwa_shuntaro (<a href='https://codepen.io/miwashutaro0611'>@miwashutaro0611</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

### 結果（横幅を変えるとフォントサイズも変わります。）
<p data-height="265" data-theme-id="dark" data-slug-hash="NBJWxr" data-default-tab="result" data-user="miwashutaro0611" data-pen-title="font-size vh vw" class="codepen">See the Pen <a href="https://codepen.io/miwashutaro0611/pen/NBJWxr/">font-size vh vw</a> by miwa_shuntaro (<a href="https://codepen.io/miwashutaro0611">@miwashutaro0611</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### vw、vhなどの参考サイト
https://www.seleqt.net/programming/responsive-display-text/

https://tks-kan.com/2017/06/07/1481/

## キーワードでfont-sizeを指定
`font-size:  xx-small`などのキーワードでもfont-sizeを指定することができる

### 使うことができるキーワード

| キーワード | 意味 |
| --- | --- |
| xx-small | 基準値 - 3<br>(10px→chromeだと最小10pxのため) |
| x-small | 基準値 - 2(10px) |
| small | 基準値 - 1(13px) |
| medium | 基準値(16px) |
| large | 基準値 + 1(18px) |
| x-large | 基準値 + 2(24px) |
| xx-large | 基準値 + 3(32px) |
| smaller | 文字段階が1段階減少(約13px) |
| larger | 文字段階が1段階増加(約19px) |

### 参考コード
<p data-height="265" data-theme-id="dark" data-slug-hash="MBxWmr" data-default-tab="result" data-user="miwashutaro0611" data-pen-title="font-size keyword" class="codepen">See the Pen <a href="https://codepen.io/miwashutaro0611/pen/MBxWmr/">font-size keyword</a> by miwa_shuntaro (<a href="https://codepen.io/miwashutaro0611">@miwashutaro0611</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 使用場面について

## 絶対に文字サイズを変更したくないなら`px`
px以外の単位だと他の要素に対して影響を受ける場合がある。
この文字は絶対このサイズのままがいい！という時は、pxでしっかり決める。

## レスポンシブに対応させたいなら`rem`
スマホの時もパソコンと同じHTMLソースを使う場合、いちいち全てのフォントを調整するのはなので、`<html>`タグのフォントサイズを調整するだけで全てのフォントのサイズを調整することができるので、変更が楽になる。

## iphone5,iphone6など微妙に違うサイズなどにも対応させたいなら`vw`など
`px`などで宣言するとタブレットとspでいろいろと細かく設定しないといけないので、`vw`で設定すると楽にできる。文字全体に設定というよりは、タイトルなどデバイスで見え方が微妙に変わって欲しくないものに使用するのがいいと思う。。。