baseline-shift
baseline-shift は CSS のプロパティで、テキスト要素の主要ベースラインを、その親テキストコンテンツ要素の主要ベースラインに対して相対的に再配置します。シフトされた要素は、下付き文字または上付き文字となることがあります。このプロパティが存在する場合、その値は要素の baseline-shift 属性を上書きします。
メモ: baseline-shift プロパティは、<svg> の中にある <textPath> 要素と <tspan> 要素にのみ適用されます。その他の SVG、HTML、擬似要素には適用されません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 79 | 149 | 4 | 18 | 3.2 | |
baseline | 1 | 79 | | 4 | 18 | 3.2 |
sub | 1 | 79 | 149 | 4 | 18 | 3.2 |
super | 1 | 79 | 149 | 4 | 18 | 3.2 |
基本構文
CSS
.superscript {
baseline-shift: super;
}
.custom-shift {
baseline-shift: 5px;
}ライブデモ
実務での使いどころ
-
上付き・下付き文字の精密な位置調整
科学記号や数式の表記で、上付き・下付き文字の位置をピクセル単位で精密に調整できます。
注意点
- Firefoxでは未サポートです。クロスブラウザ対応が必要な場合は vertical-align プロパティの使用を検討してください。
アクセシビリティ
- ベースラインのシフトは視覚的な変更のみです。上付き・下付き文字には <sup> や <sub> 要素を使用し、意味的な構造も適切に表現してください。