HTMLで上付き文字を表示させる方法4つを徹底解説
上付き文字とは㎠の「2」のように、文字の上側に小さく並べられた文字のことです。
単位を表すときに使うほか、「※」などの注釈を表す記号を小さく表示させるときなどにも使います。
この記事では、上付き文字をhtmlで表示させる方法を解説しています。
上付き文字を表示される方法は1つではないので、さまざまな方法を知り、状況に合わせて使い分けましょう。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
特殊文字を使う①
㎠（平方センチメートル）や㎤（立法センチメートル）は記号として1文字で表示させることがありますが、これは環境によっては文字化けを起こしてしまう可能性があります。
特殊文字とは特定の文字列をHTML上で変換させる技術のことで、文字化けの心配がありません。
例えば、htmlに「㎠」と記述すると「㎠」が表示されます。
古いブラウザでは対応していないケースもありますが、文字化けのリスクは格段に減らせます。
以下は、上付き文字を含む代表的な特殊文字のリストです。
- ㎟… & #13215;
- ㎠…& #13216;
- ㎡…& #13217;
- ㎢…& #13218;
- ㎣…& #13219;
- ㎤…& #13220;
- ㎥…& #13221;
- ㎦…& #13222;
「&」で始まり「;」で終わる文字列によって、さまざまな文字や記号が表現できます。
ただし、あらかじめ用意された文字や記号しか表示できないので柔軟性には欠けます。
それぞれの文字列を覚えるのは困難なので、毎回コピーアンドペーストしなければならないという難点もあります。
特殊文字を使う②
上付きの数字だけを特殊文字で表示させることもできます。
「cm²」と記述すると、㎠になります。
「&sup」と「;」の間に入力した数字が、上付き文字として表示されるというものです。ただし、対応しているのは1~3のみです。
また、以下のような記述も可能です。
- ¹…& #185;
- ²…& #178;
- ³…& #179;
利用する機会はそれほど多くありませんが、単位を記述するときは㎠や㎢を使い分けるよりも、上付きの数字だけを切り離して記述した方が効率的なケースもあります。
記述が単純なので、単位ごとの特殊文字に比べれば、覚えるのも難しくはないでしょう。
supタグを使う
supとはsuperscript（上付き文字）の略で、その名の通り文字を上付きにするためのタグです。
以下のように記述します。
HTML
<p>10cm<sup>2</sup></p>これで<sup></sup>の中の文字が、小さく上付きで表示されるようになります。
簡単に上付きにできる上に、ほとんどのブラウザに対応しています。
上付き文字を表示させるのに、もっとも手軽で確実な方法だと言えるでしょう。
ただし、上付きにして意味のある文字にのみ、使用が推奨されているという点には注意が必要です。
単位や何条といった数字であれば、上付きにすることに意味があるので問題ありません。
しかし、上付きにする理由が装飾的な意味合いのみであるというときは、別の方法を使いましょう。
また注意点として、大規模なサイトでは「リセットcss」というものを使用しているというケースを覚えておいてください。
ブラウザごとの表示の差をなくすために、デフォルトの設定を無効化するというものです。
これにsupタグの上付きを解除するスタイルが記述されていることがあります。
supタグを使っても変化がないというときは、上付きを解除するスタイルがないか確認してみてください。
ちなみに下付きにするタグはsubです。こちらも併せて覚えておくとよいでしょう。
cssを使う
cssはページの見た目の制御を担当し、HTML上の意味に影響を及ぼすことはありません。
そのため、装飾のためだけに上付き文字を表示させたい場合におすすめの方法です。
注釈を示す「※」を小さく表示させるときなどによく使われています。
HTML
<p>テキスト<span>※</span>テキスト</p>上付きにしたい「※」をhtml上の意味を持たないspanタグで囲いました。
ここにcssでスタイルを指定し、上付きにします。
CSS
span {
vertical-align: super; /*テキストを上付きに*/
font-size: 0.6em; /*テキストを小さく*/
}vertical-alignは要素の縦方向の配置を指定するプロパティで、superは上付きです。
これだけでは他と変わらない大きさのテキストが上付きで表示されてしまうので、font-sizeでテキストのサイズを小さくしています。
font-sizeを小さくしている場合は、vertical-alignは上ぞろえのtopでも表示がほぼ同じになります。
下付き文字にしたい場合は、vertical-alignでsubを指定してください。
まとめ
上付き文字を表示させるには、さまざまな方法があります。
その中で、数字を上付きにするのであればsupタグを用いる方法がもっとも効率的でしょう。
複雑な文字列を扱うことも、cssを指定することもありません。
ただし、上付きにすることにhtml上の意味がないのであれば、supタグは推奨されていません。
見た目を調整するために上付き文字を使用するのであれば、cssを使ってください。
