<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

ブラウザーの互換性

BCD tables only load in the browser

関連情報