CSSの単位まとめ + 新しい指定
CSS単位
px （ピクセル）
固定サイズで表示したい箇所全般に広く使用される。
しかし、文字サイズに指定した場合、ブラウザの文字サイズ変更機能が効かなくなるというユーザービリティ的な問題がある。
用途
固定サイズで表示したい箇所
例
font-size:14px;
margin-top:32px;
% （パーセント）
割合を表す単位。
幅、高さ、余白、位置などのサイズを親要素を基準として相対的な割合で指定することができ、
ブラウザ幅が変動しても、指定した割合を維持したまま伸縮する状態を作ることができる。
用途
親要素のサイズに比例して変化するようにしたい箇所
例
width:80%;
max-width:100%;
height:30%;
em （エム）
親要素に指定・継承されている文字サイズを基準とした単位。
その時々の文字サイズに連動して、変動するようなサイズ指定をしたい場合に重宝する単位。
用途
その時々の文字サイズに連動したサイズ指定をしたい時
活用事例
- 本文の字下げ
- リンクやボタンのテキストに付随するアイコン類
注意
emは親要素の文字サイズを基準とする為、em指定の要素が入れ子になると複雑になる
rem （レム）
ルート要素(html要素)で指定されている文字サイズを基準とした単位。
remはブラウザ設定で文字サイズだけ変更する機能を無効にしない。
用途
ブラウザの文字サイズ変更機能を生かしたまま、固定サイズで表示したい箇所
例
font-size:2rem;
padding:1rem;
活用事例
- font-sizeにpxの代わりに使用することで、ブラウザの文字サイズ変更機能を阻害しないようにする
- paddingやmarginなどに使用することで、ブラウザの文字サイズ変更機能を使われた場合でも、文字と余白のデザインバランスを担保できるようにする。
vw・vh(ブイダブリュー・ブイエイチ)
ビューポートサイズ(ブラウザの幅・高さ)を基準とした単位。
100vwでviewportの幅いっぱい、100vhでviweportの高さいっぱいを表します。
親要素を基準にしておらず、常にビューポートサイズを基準とする為、%より相対サイズ指定が容易。
用途
viewportサイズに連動してシームレスに伸縮させたい箇所
例
width:100vw;
height:100vh;
活用事例
- ファーストビュー全体を覆うようなボックスを実装する。
- 縦横比を維持したボックスを実装する。
- テキストをブラウザ幅に応じて、滑らかに実装する。
新しい値の指定方法
min()
min()関数は画面幅に応じて動的に変化する値に対して、最大値を設定する時に使用する。
例
width:min(50%,800px);
- 親要素の50%で伸縮するが、800px以上にならない。
width:50%;
max-width:800px;
上記の記述と同じ意味だが、1行で書けるメリットがある。
max()
max()関数は画面幅に応じて動的に変化する値に対して、最小値を設定する時に使用する
例
width:max(50%,300px);
- 親要素の50%で伸縮するが、300px以下にならない。
width:50%;
min-width:300px;
上記の記述と同じ意味だが、1行で書けるメリットがある。
clamp()
clamp()関数は、画面幅に応じて動的に変化する値に対して、あらかじめ最小値・最大値ともに設定しておく時に使う。
例
width:clamp(150px,50%,800px);
- 親要素の50%で伸縮するが、150px以下、800px以上にならない。
width:50%;
min-width:150px;
max-width:800px;
上記の記述と同じ意味だが、1行で書けるメリットがある
活用事例
font-size:clamp(18px,2.8vw,36px);
clamp関数は、特に身だしなどのテキストをvwで指定して画面幅に応じて、拡大縮小させる際
最小値・最大値を設定しておきたいような場面で、威力を発揮する。
Discussion