<percentage>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<percentage> は CSS のデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 width、 height, margin, padding、 font-size など、たくさんのプロパティでパーセント値を使うことができます。
メモ:
継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値（<length> 値に向けたピクセル単位の幅など）にのみアクセスできます。
構文
<percentage> データ型は、 <number> とそれに続くパーセント記号 (%) から成ります。任意で、先行して符号 (+ または -) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。
補間
アニメーションをする時、 <percentage> データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられたイージング関数で定義します。
例
幅と左マージン
html
<div class="container">
<div class="box1">Width: 50%, Left margin: 20%</div>
<div class="box2">Width: 30%, Left margin: 60%</div>
</div>
css
.container {
background-color: navy;
}
.box1 {
width: 50%;
margin-left: 20%;
background-color: chartreuse;
}
.box2 {
width: 30%;
margin-left: 60%;
background-color: pink;
}
font-size
html
<div class="container">
<p>Full-size text (18px)</p>
<p><span class="half">50% (9px)</span></p>
<p><span class="double">200% (36px)</span></p>
</div>
css
.container {
font-size: 18px;
}
.half {
font-size: 50%;
}
.double {
font-size: 200%;
}
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # percentages |