%, em, rem
%
... 親要素の値を 100% として計算する相対値。
em
... フォントサイズを基準にした単位。親要素の font-size
を基準にする。
rem
... root em. ルート要素 (html
) の font-size
を基準とする。
%
, em
で指定している値の実際のサイズは親要素によって左右される。
rem
で指定している値の実際のサイズは常に同じサイズになり、 html
の font-size
が変更されない限りはサイズは変わらない。
sample
See the Pen
em, rem, % by KIKIKI (@chaika-design)
on CodePen.
vw, vh, vmin, vmax
vw
... viewport の width を基準にした単位。ブラウザの横幅を 100vw
とする。
vh
... viewport の height を基準にした単位。ブラウザの高さを 100vh
とする。
vmin
... vw
, vh
の小さい方の値
vmax
... vw
, vh
の大きい方の値
sample
See the Pen
vw, vh, vmin, vmax by KIKIKI (@chaika-design)
on CodePen.
※ 画面幅を変えると変化がわかりやすいので、CodePenのページ を開いたほうが良さそう
vw
, vh
共に親要素のサイズ指定の影響は受けない。
画面のサイズによって大きさを変えることができるので、例えば画面幅 760px の時にフォントサイズを 16px にしたいみたいな場合は
16px / 760px = 0.02105 -> 2.105% => 2.105vw
のような計算で求められる。画面幅が大きくなればフォントサイズも大きくなり、画面幅が小さくなればフォントサイズも小さくなるので、そのまま拡大縮小させたいようなケースには良いと思うが、ある程度以上は大きくならない / 小さくならない というブレイクポイントでの制御は必要になると思う。
ブラウザのサイズを基準にしているので、width
, height
を同じ vw
または vh
で指定すればレスポンシブな正方形も作成できるが、padding-top: 100%
を使った方がコントロールがしやすいようにも感じる。(実装したい用途にも拠るけど)
参考
calc
calculator (電卓)の calc。動的にサイズを計算するプロパティ。
vw
から 1em
控えるとかも可能になる。(都度計算してるのでレンダリングコストは高そうな気がする)
注意事項
- ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。
+
演算子と -
演算子は前後に空白文字をつける必要があります。たとえば、 calc(50% -8px)
と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 calc(50% - 8px)
はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 calc(8px + -50%)
は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。
*
演算子と /
演算子には前後の空白文字は必要ありませんが、こちらにも空白文字を用い記述ルールに一貫性を持たせておくことは認められており、推奨されています。
自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 auto
が指定されたものとして扱います。
calc()
関数を入れ子にすることは許可されており、内側のものは単なる括弧として扱われます。
c.f. calc() - CSS: カスケーディングスタイルシート | MDN
sample
See the Pen
learn CSS calc() by KIKIKI (@chaika-design)
on CodePen.
所感
レスポンシブのサイトを作るには重要になってくる単位。
文章のコンテンツがメインの場合はデフォルトの文字サイズを基準に余白を付けたいので em
, rem
を使いたい派
モーダルとかの幅は vw
使っていけそうな気がするが、モバイルサイズなら左右 16px のマージンにしたいし、画面幅が広い時は max-width: calc( 最大文字数 + モーダルの余白 )
みたいな感じにしたいかも。
何かで見たフォントサイズを vw
指定にするのは結局いい感じのコントロールが大変そうな気がしたので、実際問題どうなんだろう?(vw
指定でやってる人が居れば話を聞いてみたい。)
[参考]