<relative-size>

<relative-size> は CSS のデータ型で、相対サイズのキーワードを記述します。 <relative-size> キーワードは、親要素の計算サイズからの相対サイズを定義します。このデータ型は font の一括指定と font-size プロパティで使用します。

構文

<relative-size> = smaller | larger

値

データ型 <relative-size> は下記の一覧からキーワード値を選んで定義します。

smaller

継承サイズより一回り小さい相対サイズ。

bigger

継承サイズより一回り大きい相対サイズ。

解説

<relative-size> キーワードは要素の現在のサイズからの相対サイズです。継承サイズが <absolute-size> キーワードを使用して定義されている場合、 <relative-size> 値は <absolute-size> 表の隣接サイズと等しくなります。それ以外の場合、相対的なサイズの増減は 120% から 150% の間になります。

例

キーワード値の比較

html
<ul>
  <li class="smaller">font-size: smaller;</li>
  <li>font-size が指定されていない</li>
  <li class="larger">font-size: larger;</li>
</ul>
css
li {
  margin-bottom: 0.3em;
}
.smaller {
  font-size: smaller;
}
.larger {
  font-size: larger;
}

結果

仕様書

Specification
CSS Fonts Module Level 4
# valdef-font-size-relative-size

関連情報