■ はじめに
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を使って、徐々に慣れていけばいいのかなと思いました！
