cssの単位

px / % / vw / rem / em の違いについて

px

1px

• 画面幅や親要素とか関係ない
• 絶対値

---

%やvwは「基準になる要素」の「大きさ(width)」に対してどのくらいか？

%

• 親要素に対しての割合
• 要素の親の大きさによって要素の大きさが変わる

たとえば

親 width: 1000px
子 width: 30% -> 300px分

.parent {
 width: 1000px;
}
.child {
 width: 30%;
 // 300px	
}

使い所

要素内でのレイアウト、カラムなどの幅の指定など

vw, vh

• 画面幅・高さに対しての割合
• 100vwで画面幅100%
• 画面幅で要素の大きさが変わる

たとえば

画面 1920px
親 width: 1000px
子 width: 30vw -> 576px分 (親関係ない)

.parent {
 width: 1000px;
}
.child {
 width: 30vw;
 // 1920pxのときは、576px	
}

使い所

画面の幅・高さに合わせて見せ方をしたいとき

---

rem, emは、「基準になる要素」の「font-size」に対してどのくらいか？

em

• 親のfont-sizeに対しての相対値
• 親のfont-size × 数値

たとえば

親 font-size: 10px
子 1em -> 10px , 1.5em -> 15px

.parent {
 font-size: 10px;
}
.child {
 font-size: 1em;
 // 10px	
}
.child2 {
 font-size: 1.5em;
 // 15px	
}

親 font-size: 1vw
子 1em -> 1vw , 1.5em -> 1.5vw
※親の単位がvwなどの場合、画面幅で大きさが変わる

.parent {
 font-size: 1vw;
}
.child {
 font-size: 1em;
 // 1vw, px換算は画面幅による	
}
.child2 {
 font-size: 1.5em;
 // 1.5vw, px換算は画面幅による		
}

使い所

letter-spacingや、「アイコン分のマージンを開けたいとき」など、
そのフォントに対してどのくらいか、を指定したい時に便利

rem

• html(大親？)のfont-sizeに対しての相対値
• htmlのfont-size × 数値

たとえば

html font-size: 16px
親 font-size: 10px
子 1rem -> 16px 　1.5em -> 24px

html {
 font-size: 16px;
}
.parent {
 font-size: 10px;
}

.child {
 font-size: 1rem;
 // 16px, .parentの数値は関係ない
}
.child2 {
 font-size: 1.5rem;
 // ２４px, .parentの数値は関係ない
}

html font-size: 2vw
親 font-size: 1vw
子 1em -> 2vw , 1.5em -> 3vw
※親の単位がvwなどの場合、画面幅で大きさが変わる

html {
 font-size: 2vw;
}
.parent {
 font-size: 1vw;
}

.child {
 font-size: 1rem;
 // 2vw, px換算は画面幅による, .parentの数値は関係ない
}
.child2 {
 font-size: 1.5rem;
 // 3vw, px換算は画面幅による, .parentの数値は関係ない
}

使い所

画面全体で見た時のレイアウトのマージンなど
ページ全体で基準の数値をもち、その倍数でデザインのレイアウトを組む時とか