CSSのみで上付き文字を表示する方法【positionプロパティを使った簡単実装】
2024-04-02
CSSのみで上付き文字を表示する
そこで、CSSのみを使って上付き文字を表示する方法をご紹介します。
方法1: vertical-alignプロパティ
vertical-alignプロパティを使って、文字の垂直方向の位置を調整することで、上付き文字を表示することができます。
.superscript {
vertical-align: super;
}
この例では、.superscriptクラスが付与された文字が上付き文字になります。
vertical-alignプロパティには、以下の値を指定することができます。
baseline: 基準線に揃えるtop: 文字の上端を基準線に揃えるsuper: 上付き文字
方法2: positionプロパティ
.superscript {
position: relative;
top: -0.5em;
}
static: デフォルトの位置relative: 相対的な位置absolute: 絶対的な位置fixed: 画面に固定された位置
方法3: transformプロパティ
.superscript {
transform: scale(0.8);
position: relative;
top: 0.2em;
}
scale: 拡大・縮小translate: 移動rotate: 回転skew: 傾斜
CSSのみで上付き文字を表示するには、vertical-alignプロパティ、positionプロパティ、transformプロパティのいずれかを使用することができます。
それぞれの方法にはメリットとデメリットがあるため、目的に合った方法を選択する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSで上付き文字を表示する</title>
<style>
/* 方法1 */
.superscript-1 {
vertical-align: super;
}
/* 方法2 */
.superscript-2 {
position: relative;
top: -0.5em;
}
/* 方法3 */
.superscript-3 {
transform: scale(0.8);
position: relative;
top: 0.2em;
}
</style>
</head>
<body>
<h1>上付き文字を表示する</h1>
<p>
方法1: <span class="superscript-1">2</span>^2 = 4
</p>
<p>
方法2: <span class="superscript-2">2</span>^2 = 4
</p>
<p>
方法3: <span class="superscript-3">2</span>^2 = 4
</p>
</body>
</html>
上付き文字を表示する
方法1: 2^2 = 4
方法2: 2^2 = 4
方法3: 2^2 = 4
それぞれの方法で、上付き文字がどのように表示されているかを確認することができます。
CSSのみで上付き文字を表示する他の方法
方法4: line-heightプロパティ
.superscript {
line-height: 0.5;
}
方法5: letter-spacingプロパティ
.superscript {
letter-spacing: 0.1em;
}
方法6: text-transformプロパティ
.superscript {
text-transform: uppercase;
}
方法7: font-sizeプロパティ
.superscript {
font-size: 0.8em;
}
CSSのみで上付き文字を表示するには、さまざまな方法があります。
css
