CSSでのサイズ指定はムズカシイ…　その２

前回はサイズの指定方法を整理しましたが、今回ははその使い分けをまとめていきたいと思います。
（いろいろなサイトに書かれている内容を自分なりにまとめてみた）

前回と今回で自分の理解を深めていきたいと思いますので、参考にして頂ければ幸いです(笑)

まとめ（CSS 単位、使い分け）

サイズ指定（前回記事）

• px（ピクセル）は絶対値で指定する。
• %（パーセント）は、親要素に対する割合で指定する。
• em（エム）は、親要素のフォントサイズを基準に倍率を指定する。
• rem（レム）は、ルート要素のフォントサイズを基準に倍率を指定する。

使い分け（更新）

• サイズを固定したい要素：px（ピクセル）
• フォントサイズ：rem（レム）
• 要素サイズ：rem（レム）　フォントサイズと同じにするのが良さそう

絶対値の使いどころ

「ここはサイズを固定したい」部分（ブラウザ幅が可変しても大きさや太さを変えたくない要素）がpxの使いどころになります。
「固定ヘッダーの高さ」、「サイドバーの幅」が分かりやすいです。
あと、よく出てくるのは、枠線や図形など（ボーダーで指定するもの）、コンテンツ領域のMAX幅などもあるようです。

相対値の使いどころ

フォントサイズ：rem

ブラウザでフォントサイズの変更ができるので、px（絶対値）でサイズ指定してしまうと、使っている人が想定した拡大・縮小の動きならずユーザビリティ的には問題です（絶対値指定なので、ブラウザのフォントサイズを変更しても影響を受けないため）

emや%は親要素の大きさに左右されるので、繰り返し使うと管理上大変です。
vwで指定するとディスプレイサイズ次第では大きさが極端になることがあります。

そこで、親要素に依存せず相対的なサイズを指定できる「rem」が適していそうです。

要素サイズ：rem

要素サイズはpx、フォントサイズをremで指定すると、ブラウザフォントサイズを変更した場合に要素の大きさは変わりませんがフォントサイズは可変してしまい要素の中でフォントが見切れてしまうなどレイアウトや表示が崩れることがあります。

こうなることを防ぐには、要素サイズ・フォントサイズどちらも「px」か「rem」に統一させる必要があります。

そこで、どちらも「rem」で指定しておくと、要素とフォントサイズが相対的に拡大・縮小される（余白も含めた大きさの関係性が維持）ため「rem」が適していそうです。

以下はまだ勉強中なので、解説サイトを参考に挙げてみました。

画面幅いっぱいに表示させたい要素：％

headerやfooterなど（body直下）width:100％と指定すれば、body（画面幅）いっぱいに表示されます。

em

テキストとのバランスが大事な、余白やボタンサイズなどの設定に向いている

画面を占有して表示させる要素：vw

モーダルウィンドウなど、画面占有することが決まってるレイアウトの設定

まだまだ勉強中の部分もあり、基本的な部分のサイズ指定までしか考察できまていませんが、それぞれのサイズ指定の内容、レスポンシブル対応など、いろいろと考えながら使っていきたいと思います。