<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 |
ブラウザーの互換性
Loading…