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

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

構文

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

補間

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

幅と左マージン

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

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

フォントの大きさ

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

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

仕様書

仕様書 策定状況 コメント
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> の定義
勧告 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり1 あり あり1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり

ドキュメントのタグと貢献者

最終更新者: mfuji09,