font-variant-positionは上付き文字や下付き文字にしたいときに使うCSSプロパティ

こんにちは。今回は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(上付き文字)」の略です。
注意
特定の文字の列で、そのような文字の1つが使用できない時は、文字列内のすべての文字が合成を使用し表示されます。

対応ブラウザ

対応ブラウザは以下の通りです。

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の使い方

基本的な構文になります。

font-variant-position: normal | sub | super ;

上付き文字にしたいとき

font-variant-position:  super ;

下付き文字にしたいとき

font-variant-position:  sub ;

では、実際に使ってみましょう。以下はサンプルです。

このように表示されます。

水の化学式はH2Oです。

ピタゴラスの定理は直角三角形の直角をはさむ2辺の長さをa、b、斜辺の長さをcとすると、
c2=a2+b2です。

font-variant-positionと類似する要素との違い

subタグ・supタグ

font-variant-positionプロパティは、フォントデータに含まれる「下付き文字グリフ・上付き文字グリフ」を使うという違いがありますが、subタグ・supタグは font-sizeプロパティ と vertical-alignプロパティで表示されます。

上付き文字は「sup」、下付き文字は「sub」を使います。

上付き文字の使い方

上付き文字にしたいところを、<sup></sup>タグで囲みます。

このように表示されます。

ピタゴラスの定理は直角三角形の直角をはさむ2辺の長さをa、b、斜辺の長さをcとすると、
c2=a2+b2です。
下付き文字の使い方

下付き文字にしたいところを、<sub></sub>タグで囲みます。

このように表示されます。

水の化学式はH2Oです。

vertical-align

インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定するCSSプロパティです。

CSSプロパティはこちらの方が使われることが多いようです。

vertical-align: superで上付き文字、vertical-align: subで下付き文字が表示されます。

このように表示されます。

ピタゴラスの定理は直角三角形の直角をはさむ2辺の長さをa、b、斜辺の長さをcとすると、
c2=a2+b2です。
水の化学式はH2Oです。
注意
vertical-align はインライン要素、インラインブロック要素、表セル要素だけに適用できます。ブロックレベル要素の縦方向の整列には使えないことに注意してください。

まとめ

いかがでしたか?今回はcssで上付き文字や下付き文字にしたいときに使う、font-variant-positionプロパティの

・基本的な使い方

を説明しました。ただ、対応しているブラウザが少ないので、ほとんど使われることがないかもしれません。ご自分が使いやすいプロパティや要素を使ってください。

参考文献:W3C  仕様書|font-variant-position

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング