WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「上付き文字・下付き文字の指定」

font-variant-position「上付き文字・下付き文字の指定」

「font-variant-position」は、上付き文字・下付き文字を指定します。

CSS Ver.適用要素継承
3.0全要素する
広告

font-variant-position の指定方法

構文

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

プロパティ/設定値意味
font-variant-position : normal; 通常の表示
font-variant-position : sub; 下付き文字で表示
font-variant-position : super; 上付き文字で表示
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

font-variant-position のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-normal{font-variant-position : normal;}
.css-sub{font-variant-position : sub;}
.css-super{font-variant-position : super;}

<!-- html -->
<div class="common">
  <div class="cssTitle">font-variant-position 表示例<br><br>
  左:super 中:normal 右:sub</div>
  <div>
  <span class="css-super">
  super! </span>
  <span class="css-normal">
  normal! </span>
  <span class="css-sub">
  sub!</span>
  </div>
</div>
font-variant-position 表示例
左:super 中:normal 右:sub
super!  normal!  sub!

※ほとんどのブラウザが未対応のようです。現時点(2017/05)で、Firefoxは動作確認できました。

【W3Cのfont-variant-position仕様書】
https://www.w3.org/TR/css-fonts-3/#font-variant-position-prop


広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン