このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<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 2015年7月.
<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 |