こんにちは。今回はcssのfont-variant-positionプロパティを説明します。
そのような機会も出てくるでしょう。cssで上付き文字や下付き文字にしたいときには、font-variant-positionプロパティが使えます。
今回は、font-variant-positionプロパティの
について説明します。
font-variant-positionプロパティとは
font-variant-positionの読み方
font-variant-positionは「フォントヴァリアントポジション」と読みます。「variant（ヴァリアント）」とは「変形」「異なるもの」「変数」と言った意味です。
font-variant-positionの説明
font-variant-positionプロパティは、上付き文字・下付き文字、また通常のフォントとしてフォントの位置を変えるために使われます。
文字は変えないまま、フォントのベースラインから相対的に配置されます。
表示は上付き文字の <sup>、下付き文字の <sub>と同じように、化学式や計算式で使われることが多いスタイルを表します。
font-variant-positionで利用できる値
font-variant-positionでは以下の値を使うことができます。
| 属性 | 説明 |
|---|---|
| normal | 初期値、通常の表示です。上付き文字・下付き文字の代替を無効にします。 |
| sub | 下付き文字を表示します。sub は「subscript（下付き文字）」の略です。 |
| super | 上付き文字を表示します。super は「superscript（上付き文字）」の略です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 未対応 |
| Edge | 未対応 |
| Firefox | 34 |
| nternet Explorer | 未対応 |
| Opera | 未対応 |
| Safari | 未対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 未対応 |
| Android版Chrome | 未対応 |
| Android版Firefox | 34 |
| Android 版 Opera | 未対応 |
| iOS版Safari | 未対応 |
| Samsung Internet | 未対応 |
font-variant-positionの基本的な使い方
font-variant-positionプロパティの基本的な使い方を見ていきましょう。
font-variant-positionの使い方
基本的な構文になります。
上付き文字にしたいとき
下付き文字にしたいとき
では、実際に使ってみましょう。以下はサンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <style> .p-sub span { font-variant-position: sub } .p-super span { font-variant-position: super } </style> <body> <div class="main"> <p class="p-sub span"> 水の化学式はH<span>2</span>Oです。</p> <p class="p-super span">ピタゴラスの定理は直角三角形の直角をはさむ２辺の長さをa、b、斜辺の長さをcとすると、 c<span>2</span>=a<span>2</span>+b<span>2</span>です。</p> </div> </body> </html> |
このように表示されます。
水の化学式はH2Oです。
ピタゴラスの定理は直角三角形の直角をはさむ２辺の長さをa、b、斜辺の長さをcとすると、
c2=a2+b2です。
font-variant-positionと類似する要素との違い
subタグ・supタグ
font-variant-positionプロパティは、フォントデータに含まれる「下付き文字グリフ・上付き文字グリフ」を使うという違いがありますが、subタグ・supタグは font-sizeプロパティ と vertical-alignプロパティで表示されます。
上付き文字は「sup」、下付き文字は「sub」を使います。
上付き文字の使い方
上付き文字にしたいところを、<sup></sup>タグで囲みます。
|
1 2 |
ピタゴラスの定理は直角三角形の直角をはさむ２辺の長さをa、b、斜辺の長さをcとすると、 c<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>です。 |
このように表示されます。
c2=a2+b2です。
下付き文字の使い方
下付き文字にしたいところを、<sub></sub>タグで囲みます。
|
1 |
水の化学式はH<sub>2</sub>Oです。 |
このように表示されます。
vertical-align
インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定するCSSプロパティです。
CSSプロパティはこちらの方が使われることが多いようです。
vertical-align: superで上付き文字、vertical-align: subで下付き文字が表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<p>ピタゴラスの定理は直角三角形の直角をはさむ２辺の長さをa、b、斜辺の長さをcとすると、c<span class="sup">2</span>=a<span class="sup">2</span>+b<span class="sup">2</span>です。 </p> <p>H<span class="sub">2</span>O</p> .sup { vertical-align: super; font-size: smaller; } .sub { vertical-align: sub; font-size: smaller; } |
このように表示されます。
c2=a2+b2です。
水の化学式はH2Oです。
まとめ
いかがでしたか？今回はcssで上付き文字や下付き文字にしたいときに使う、font-variant-positionプロパティの
を説明しました。ただ、対応しているブラウザが少ないので、ほとんど使われることがないかもしれません。ご自分が使いやすいプロパティや要素を使ってください。
参考文献：W3C 仕様書｜font-variant-position
