CSS `math-depth` プロパティ

Baseline 2026

構文

css

/* キーワード値 */
math-depth: auto-add;

/* 相対値 */
math-depth: add(2);
math-depth: add(-2);

/* 絶対値 */
math-depth: 4;

/* グローバル値 */
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;

値

auto-add: 継承された math-style が compact の場合、継承された math-depth に 1 を足した値を設定します。
add(<integer>): 継承された math-depth に指定した整数を足した値に設定します。
<integer>: 指定された整数に設定します。

公式定義

初期値	`0`
適用対象	すべての要素
継承	あり
計算値	指定通り
アニメーションの種類	アニメーション不可

形式文法

math-depth = 
  auto-add          |
  add( <integer> )  |
  <integer>         

<integer> = 
  <number-token>

例

数式の深さの指定

以下の例では、math-depth プロパティを変更したときの部分式のフォントサイズへの影響を示しています。各部分式の数字は適用された math-depth と拡大率を示しています。

最初の <mtext> 要素は他の部分式への参照として使用され、特定のスタイルは適用されていません。 2 番目と 3 番目の部分式は math-depth が auto-add に設定され、math-style に応じた倍率の効果が表示されます。

最後の 2 つの部分式は、 math-depth を特定の値に設定した場合の効果を示しています。

HTML

html

<p>
  <math>
    <mtext>0</mtext>

    <!-- auto-add の値は、math-style が normal の場合は反映されない -->
    <mrow style="math-style: normal">
      <mrow style="math-depth: auto-add">
        <mtext>0</mtext>
      </mrow>
    </mrow>

    <!-- math-style の継承値は compact であるため、math-depth は 1 に設定される -->
    <mrow style="math-depth: auto-add">
      <mtext>1</mtext>
    </mrow>

    <mrow style="math-depth: add(2)">
      <mtext>2</mtext>
      <mrow style="math-depth: add(-1)">
        <mtext>1</mtext>
      </mrow>
      <mrow style="math-depth: 0">
        <mtext>0</mtext>
      </mrow>
    </mrow>
  </math>
</p>

p {
  font-size: 3rem;
  margin: 1rem 0;
}

結果

仕様書

仕様書
MathML Core # the-math-script-level-property

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年7月9日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

CSS math-depth プロパティ

HTML

結果

MDN の改良に協力

CSS `math-depth` プロパティ