<length-percentage>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<length-percentage>CSSデータ型で、 <length> または <percentage> が取りうる値を表します。

構文

この型に利用できる個々の構文の詳細は、 <length> および <percentage> の文書を参照してください。

形式文法

<length-percentage> = 
<length> |
<percentage>

length-percentage の例

以下の簡単な例では、<length-percentage> の値を使用するいくつかのプロパティを示しています。

HTML

html
<p>パーセント値や長さは様々な場面で使うことができます。</p>

CSS

css
p {
  /* length-percentage の例 */
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /* length の例 */
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /* percentage example */
  text-size-adjust: 20%;
}

結果

calc() での使用

許可されている型として <length-percentage> が指定されているところでは、これはパーセント値が長さとして解決されるので、 calc() の式で利用することができます。したがって、以下のすべての値が width で利用できます。

css
width: 200px;
width: 20%;
width: calc(100% - 200px);

仕様書

Specification
CSS Values and Units Module Level 4
# mixed-percentages

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<length-percentage>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報