記事内にはプロモーションが含まれています

【HTML/CSS】上付き文字・下付き文字をきれいに表示する方法

【HTML/CSS】上付き文字・下付き文字をきれいに表示する方法 CSS

Webサイトの文章中で、注釈の「※1」や商標の「®」、数式の「2乗」などを、文字の右上に小さく表示したい場面はよくあります。

これを「上付き文字（スーパースクリプト）」と呼びますが、単に文字サイズを小さくするだけでは位置が揃わず、不格好になりがちです。

HTMLには専用のタグが用意されていますが、デザインにこだわるならCSSでの制御が欠かせません。
特に、「上付き文字を入れたら行間がガタガタになってしまった」というトラブルは、多くのコーダーが通る道です。

この記事では、HTMLとCSSを使って上付き文字（および下付き文字）を実装する基本的な方法から、レイアウトを崩さずに位置を微調整するプロのテクニックまで、現在のWeb制作で推奨される手法をサンプルコード付きで徹底解説します。

【本記事の信頼性】
プロフィール
執筆者：マヒロ
  • 執筆者は元エンジニア
  • SES⇒大手の社内SE⇒独立
  • 現在はこじんまりとしたプログラミングスクールを運営
  • モットーは「利他の精神」

HTMLのsupタグを使って上付き文字にする基本

最も標準的で、Googleなどの検索エンジンにも意味が伝わりやすいのが、HTMLの <sup> タグ を使う方法です。

文章としての意味構造（セマンティクス）を重視する場合は、まずこの方法を検討しましょう。

supタグの基本的な書き方

使い方は非常にシンプルで、上付きにしたい文字を <sup> 〜 </sup> で囲むだけです。

<p>
    商標登録マーク<sup>&reg;</sup>を表示します。<br>
    数式の例： E = mc<sup>2</sup>
</p>

<sup> タグで囲まれた部分は、ブラウザのデフォルトスタイルによって「文字サイズが小さく」なり、「ベースラインより上」に表示されます。

特別なCSSを書かなくても自動的に上付き文字として扱われるため、数式や単位記号、注釈番号など、文書の意味として上付きであるべき箇所にはこのタグを使用するのがベストプラクティスです。

CSSのvertical-alignで上付き文字を作る

HTMLタグを変えずに、特定のクラスがついた箇所だけを上付きにしたい場合や、デザイン的な装飾として上付きにしたい場合は、CSSの vertical-align プロパティを使用します。

span タグなどと組み合わせて使うのが一般的です。

vertical-align: super; を使う

vertical-align プロパティには、その名の通り super という値が用意されています。

<p>
    注釈<span class="text-super">※1</span>のデザイン調整
</p>

<style>
.text-super {
    /* 上付き文字にする */
    vertical-align: super;
    /* 文字サイズを少し小さくする（必須ではないが見栄えのため） */
    font-size: smaller;
}
</style>

vertical-align: super; を指定することで、その要素は親要素のベースラインよりも上に配置されます。

ただし、<sup> タグと違ってフォントサイズは自動で小さくならないため、合わせて font-size: smaller; や font-size: 80%; などを指定してバランスを整えるのが一般的です。

位置がずれる？レイアウトを崩さずに微調整するテクニック

<sup> タグや vertical-align: super; を使うと、しばしば「行間（line-height）が広がってしまい、文章のリズムが崩れる」という問題が発生します。

これは、上付き文字が上にはみ出した分だけ、ブラウザが行の高さを自動的に広げてしまうためです。

この問題を回避し、美しいレイアウトを保ったまま位置を調整するテクニックを紹介します。

vertical-alignを使わずにpositionで調整する

行間に影響を与えず、かつピクセル単位で位置を調整したい場合は、position: relative; を使います。

<p>
    この文章は行間が崩れません<span class="custom-sup">※注</span>。
    スムーズに読むことができます。
</p>

<style>
.custom-sup {
    /* 1. フォントサイズを調整 */
    font-size: 75%;
    
    /* 2. vertical-alignはベースラインに戻す */
    vertical-align: baseline;
    
    /* 3. 相対配置で位置をずらす */
    position: relative;
    top: -0.5em; /* 文字の高さの半分だけ上にずらす */
}
</style>

このテクニックのポイントは3つあります。

まず、font-size で文字を小さくします。
次に、vertical-align の影響をリセット（または無視）するために position: relative; を指定します。

そして、top: -0.5em; （マイナスの値を指定）することで、元の位置から上に移動させます。

position プロパティによる移動は、周囲の要素（行の高さなど）に影響を与えないため、行間を崩さずに上付き文字を配置することができます。

【おまけ】下付き文字（sub）の実装方法

化学式の「H₂O」のように、文字の下側に小さく表示する「下付き文字」についても触れておきます。

考え方は上付き文字と全く同じです。

subタグまたはvertical-align: sub;

HTMLでは <sub> タグ、CSSでは vertical-align: sub; を使用します。

<p>
    水は化学式で H<sub>2</sub>O と書きます。
</p>

<sub> タグで囲むことで、ベースラインより下に文字が表示されます。

CSSで微調整する場合も、先ほどの top の値をプラス（例：top: 0.5em;）にするか、bottom プロパティを使うことで、行間を崩さずに配置可能です。

HTML/CSSのスキルを活かして年収を上げる方法

以上、HTML/CSSで上付き文字・下付き文字をきれいに表示する方法を解説してきました。

なお、HTMLやCSSのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

HTML/CSSのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。

スポンサーリンク