<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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

<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