<percentage>

<percentage>CSSデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 widthheight, margin, paddingfont-size など、たくさんのプロパティでパーセント値を使うことができます。

注: 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 (<length> 値に向けたピクセル単位の幅など) にのみアクセスできます。

構文

<percentage> データ型は、 <number> とそれに続くパーセント記号 (%) から成ります。任意で、先行して符号 (+ または -) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。

補間

アニメーションをする時、 <percentage> データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられたタイミング関数で定義します。

幅と左マージン

<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>

以上の HTML は以下のような出力になります。

font-size

<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50% (9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>

以上の HTML は以下のような出力になります。

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 4
<percentage> の定義
編集者草案 目立った変更はなし。
CSS Values and Units Module Level 3
<percentage> の定義
勧告候補 CSS Level 2 (Revision 1) から目立った変更なし。
CSS Level 2 (Revision 1)
<percentage> の定義
勧告 CSS Level 1 から変更なし。
CSS Level 1
<percentage> の定義
勧告 初回定義。

ブラウザーの互換性

BCD tables only load in the browser