【CSS】スタイルの数値と単位
CSSのプロパティ値に使う数値と単位についてご紹介します。
数値
プロパティ値は整数や小数点数などの数値が利用できます。
単位
プロパティ値に数値を利用する場合、単位を付けます。
代表的な単位にpxやem、rem、%などがあります。
単位 : px
単位pxはピクセルを表わします。
ピクセルとはディスプレイを構成する粒の単位で、解像度によって実際のサイズが変わります。
例 : font-size
<style>
.message {
font-size: 36px;
}
</style>
<p>text text text text text</p>
<p class="message">text text text text text</p>例 : width, height
<style>
div {
width: 100px;
height: 100px;
background: red;
}
</style>
<div></div>単位 : em
単位emは親要素の文字サイズ相対値です。
例えば、親要素の文字サイズが16pxの場合、2.5emは40pxになります。
ただし、widthやheightなどにemを使う場合、要素自体の文字サイズが相対値の対象になります。
例 : font-size
<style>
div {
font-size: 16px;
}
.message {
font-size: 2.5em;
}
</style>
<div>
<p>text text text text text</p>
<p class="message">text text text text text</p>
</div>例 : width, height
<style>
.d1 {
font-size: 16px;
}
.d2 {
width: 2em;
height: 2em;
background: red;
}
.d3 {
font-size: 24px;
width: 2em;
height: 2em;
background: red;
}
</style>
<div class="d1">
<div class="d2"></div>
<hr>
<div class="d3"></div>
</div>単位 : rem
単位remはルート要素（主にhtml要素）の文字サイズ相対値です。
例えば、親要素の文字サイズが16pxの場合、2.5remは40pxになります。
例 : font-size
<style>
html {
font-size: 16px;
}
div {
font-size: 24px;
}
.message1 {
font-size: 2.5em;
}
.message2 {
font-size: 2.5rem;
}
</style>
<div>
<p class="message1">text text text text text</p>
<p class="message2">text text text text text</p>
<div>例 : width, height
<style>
html {
font-size: 16px;
}
.d1 {
font-size: 24px;
}
.d2 {
width: 2em;
height: 2em;
background: red;
}
.d3 {
width: 2rem;
height: 2rem;
background: red;
}
</style>
<div class="d1">
<div class="d2"></div>
<hr>
<div class="d3"></div>
</div>単位 : %
単位%（パーセント）は親要素のサイズ相対値です。
例えば、親要素のwidthが250pxの場合、50%は125pxになります。
注意点は%を高さ（height）に使用する場合、場親要素の高さが計算（指定）済みである必要があります。
基本的に親要素の高さは何も定義しないと、子要素によって算出されます。
そのため、高さを指定しないと相対値がなく、%で計算できません。
例 : font-size
<style>
div {
font-size: 24px;
}
.message {
font-size: 50%;
}
</style>
<div>
<p>text text text text text</p>
<p class="message">text text text text text</p>
</div>例 : width, height
<style>
.d1 {
border: 1px solid black;
padding: 15px;
}
.d2 {
width: 100%;
height: 20px;
background: red;
}
</style>
<div class="d1">
<div class="d2"></div>
</div><style>
.box {
border: 1px solid black;
padding: 15px;
}
.box2 {
height: 100px;
}
.shapes {
width: 100%;
background: red;
}
.shapes1 {
height: 20px;
}
.shapes2 {
height: 50%;
}
.shapes3 {
height: 50%;
}
</style>
<div class="box box1">
<div class="shapes shapes1"></div>
</div>
<hr>
<div class="box box2">
<div class="shapes shapes2"></div>
</div>
<hr>
<div class="box box3">
<div class="shapes shapes3"></div>
</div>
