目次
ｐｘ（ピクセル）
- スクリーンの１ピクセルの長さを１とした単位
- 固定サイズで表示させたい箇所全般に広く使われる
用途
固定したサイズで表示したいとき
文字サイズに使用した場合、ブラウザの文字サイズ変更機能が効かなくなる
<div class="box_px"></div>.box_px{
width: 200px;
height: 200px;
background: #666666;
margin: 0 auto;
}画面サイズが変わっても四角のサイズは変わりません。
％（パーセント）
- 親要素に対する割合で表示する
- 画面サイズが変わっても指定した割合を維持
用途
親要素のサイズに比例して変化するようにしたいとき
摘要するプロパティーによって親要素の何のサイズを基準にするのかが異なる
| 対象のプロパティ | 基準となるサイズ |
|---|---|
| width | 親要素のcontent-boxの横幅 |
| height | 親要素のcontent-boxの縦幅 |
| margin・padding | 親要素のcontent-boxの横幅（上下左右ともに） |
| left・right | 親要素のpadding-boxの横幅 |
| top・bottom | 親要素のpadding-boxの縦幅 |
| font-size | 親要素に指定・継承されたフォントサイズ ※挙動はemと同じ |
要素が入れ子になっている場合、計算が複雑になる可能性がある
クセがあるのでどのサイズが基準となっているのかを良く考えて使う必要がある。
<div class="parent">
<div class="box_%">
</div>
</div>.rarent{
width: 800px;
height: 200px;
margin: 0 auto;
}
.box_%{
width: 70%;
height: 200px;
background: #666666;
margin: 0 auto;
}親要素（ここではコンテンツ幅）に合わせてグレーの部分の幅が変化します。
em（エム）
- 親要素に指定・継承されている文字サイズが基準の単位
用途
その時々の文字サイズに連動したサイズ指定をしたいとき
ex.
- 本文の字下げ
- 一行の高さ
- テキストに付随するアイコンのサイズ
親要素の文字サイズを基準にしているのでem指定の要素が入れ子になった時、計算が複雑になる
<div class="box">
<div class="em_ex-1">
<div class="col1">
<p>テキスト</p>
</div>
</div>
<div class="em_ex-2">
<div class="col1">
<p>テキスト</p>
</div>
</div>
</div>/*省略*/
.em_ex-1{
font-size: 16px;
background: #333333;
margin-left: auto;
}
.em_ex-2{
font-size: 32px;
background: #333333;
margin-right: auto;
}
.col1{
font-size: 1em; /*親要素によってサイズが変わる*/
width: 20vw;
height: 20vw;
display: flex;
align-items: center;
justify-content: center;
}テキスト
テキスト
同じ1emでも、親要素に指定した値によってテキストのサイズが変わります。
rem（レム）
- ルート要素（HTML要素）で指定されている文字サイズを基準とした単位
- 多くのブラウザで標準文字サイズは16px（何もしなければ1rem＝16px）
用途
- font-sizeでpxの代わりに用いることでブラウザのサイズ変更機能を邪魔しない。
- padding・marginや余白に用いることでブラウザの文字サイズ変更機能に応じてデザインバランスを保つことができる。
width・heightに使う場合、文字サイズを変更した時にレイアウトが崩れないか確認が必要です
vw・vh（ブイダブリュー・ブイエイチ）
- ビューポートサイズが基準の単位。100vw＝viewportいっぱい（表示している画面幅）で100vhは同様の高さになります
用途
ブラウザ幅に応じてシームレスに伸縮させたいとき
ex.
- ファーストビュー全体を覆うようなボックスを実装する
- 縦横比率を維持したいとき
- テキストをブラウザ幅に応じて応じて滑らかに伸縮させる
「50vwは画面サイズの半分」のようにイメージもしやすいです
コメント