このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
math-depth
Baseline
2026
最近利用可能
March 2026以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
math-depth プロパティは、数式の各要素について、その数式の最上位コンテナーに対する 深さ の概念を記述します。これは、 font-size: math が適用されたとき、要素の font-size の計算値を調整するために使用されます。
メモ:
font-size: math は MathML Core のユーザーエージェントスタイルシートにおける <math> 要素の既定値ですので、明示的に指定する必要はありません。
構文
/* キーワード値 */
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
<p style="font-size: 3rem; margin: 1rem 0">
<math>
<mtext>0</mtext>
<!-- auto-add value has no effect when math-style is normal -->
<mrow style="math-style: normal">
<mrow style="math-depth: auto-add">
<mtext>0</mtext>
</mrow>
</mrow>
<!-- the inherited math-style is compact, so math-depth is set to 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>
結果
仕様書
| 仕様書 |
|---|
| MathML Core # the-math-script-level-property |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。