CSSで上付き・下付き注釈をつける書き方【コードペンデモ有り】

文中に、CSSで上付き・下付き注釈を付けたいのだけど、どうすれば良いの?

このような疑問に回答します。

本記事ではCSSを使っての上付き・下付き注釈の付け方について回答します。

コードペンを使っての参考書き方

See the Pen 上付き文字・下付き文字 by Kohei (@kouk05) on CodePen.dark

上付き・下付きの参考の書き方です。

詳細としては以下になります。

まずは上つき・下付きさせたい注釈をspanタグなどで囲みましょう。

あとは下記CSSのプロパティをspanタグに反映すればOK!

上付き:vertical-align: super;
下付き:vertical-align: sub;

注釈なのでフォントサイズを通常のテキストより小さくしましょう。

以上で完成です。

Ads

関連記事

WordPress プログラミング

【簡単】投稿用カテゴリーの初期設定(未分類)を変更する方法

2022.03.31
17
WordPress プログラミング

【wordpress投稿】アイキャッチではなく最初の画像をサムネイルにする方法

更新日:2021.10.26
94
HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
895
HTMLCSS

HTMLで前のページ・次のページへ戻るリンクボタンを実装する方法

2022.06.30
21