このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

<length-percentage>

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

構文

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

例

length-percentage の例

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

HTML

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

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 で利用できます。

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

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報