CSS(em,rem,px,%)の指定する単位について

■ はじめに

CSSの指定する単位について記事にしました。
この記事で得る内容は以下の通りです。

・CSSの基礎知識が増える
・CSSのプロパティを適切な単位で指定する事で、アクセシビリティを向上させ、より良いサービスを作ることができる

■ 参考にさせて頂いたサイト
ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い

■ em,rem,px,%について

■ em

・大文字「M」の高さを基準に1文字分の大きさを示し、親要素のfont-size値を基準に相対的な値とする
・要素が入れ子構造である場合、意図しない異なる大きさになる可能性がある

emで指定した場合

html {
  font-size: 10px;
  body {
    font-size: 1.5em;
    // font-size: 15px;
    div {
      font-size: 1.2em;
    // font-size: 18px;
    }
  }
}

■ rem

・root emの略で、root要素（html要素)のfont-size値を基準に相対的な値とする
・html要素のfont-size値を調整することで、ページ全体のサイズ変更にも対応しやすい

remで指定した場合

html {
  font-size: 10px;
  body {
    font-size: 1.5rem;
    // font-size: 15px;
    div {
      font-size: 1.2rem;
    // font-size: 12px;
    }
  }
}

■ px

・絶対値（他の要素に影響されない）
・グラフィックソフトでWebデザインを制作時、サイズ単位として用いられ、データの整合性を取りやすい
・ユーザー操作による文字サイズの変更に対応できなかったり、環境や端末により文字サイズが異なる場合がある

■ %

・相対値で、プロパティによって何が基準になるか異なる
・vw,vhと比較されますが、vw,vhはスクロールバーの幅が影響するので、全体的なレイアウトには%が良い

■ まとめ

単位	プロパティ
px	borderなど
%	height、widthなど
em	font-size、paddingなど
rem	emと同じ

pxは、borderやborder-radiusなど見た目が変わらない所に。
%は、大まかなレイアウトやブロック要素に。
他はremを使って、徐々に慣れていけばいいのかなと思いました！