使うプロパティは2つだけ!上付き「※」を表現するCSS

CSS

制作をしていると、時々出会うことがある上付きの「※」。

(例)この記事では、上付きの注釈を表す記号「」のスタイリングについて紹介します。

プロジェクトなどによってはよく使われたりするので、一発で表現できるスタイリングの記述があると便利ですね。

今回は、私がこの上付き「※」を表現するときにいつも使う記述を書いておこうと思います。

スポンサーリンク

いつも使うスタイリングの記述

ここでは、時折見かける「段落を分け、最後に注釈をまとめて記載」する場合を例にとります。

私がいつも上付き「※」を使うときにする記述は以下のようなものです。
使うCSSプロパティはたった2つだけです。

HTML

<p>この記事では、上付きの注釈を表す記号<span class="example">※1</span>のスタイリング<span class="example">※2</span>について紹介します。</p>
<p><small>※1 ここでは「※」マークを例とします。</small><br><small>※2 CSSの記述。</small></p>

CSS

.example {
	font-size: 0.8em;
	vertical-align: top;
}

表示例

この記事では、上付きの注釈を表す記号※1のスタイリング※2について紹介します。

※1 ここでは「※」マークを例とします。
※2 CSSの記述。

解説

冒頭で使用した「この記事では、上付きの注釈を表す記号のスタイリングについて紹介します。」という例文を使い解説を行います。

HTML

HTMLは、上付きにしたい「※」をspanタグで囲い、クラス名を付与します。ここでは仮に「example」としましたが、実際は他所で使いまわせるようちゃんとした名前を付けてあげるのが望ましいですね。

CSS

本題のスタイリングの記述です。専用のクラス名に対して記述を行ないます。

font-size: 0.8em;

まずは少し文字を小さくします。ここでは例として0.8emとしましたが、バランスを見て数値は変えますし、場合によってはremにすることもあります。

私は基本的に会社のテンプレートを基にして制作を行なっているので、テンプレートのCSSで指定されているfont-sizeの書き方に準拠します。

vertical-align: top;

「上付きにする」のはvertical-alignを使います。値にtopを指定することで、文字の上の線を基準に揃えます。文字サイズを少し小さくしている分、topに揃えることで上付きに見せることができます。

上付き文字を表すsupタグは非推奨?

supタグは、上付き文字を表すHTMLタグです。
<sup>~</sup>で囲った範囲の文字について、上付き文字にすることができます。

しかし、このタグは以下の2つの理由から、注釈の上付き「※」には使用が不適切と思われます。

supタグの意味合いとして、使用は好ましくない

このタグは「上付きである場合に意味を持つ」文字列に対してのみの使用が好ましいとされるようです。
たとえば数学のべき乗(22)や、単位(m2)などはsupタグを使ってマークアップすることが可能です。

この条件を考えると、今回論点としている注釈の「※」を表す場合は、supタグは不適切ということになります。

リセットCSSでスタイリングがリセットされている可能性がある

ページ制作のコーディングではたいてい、ブラウザごとのスタイルの差をなくすためnormalize.cssやHTML5 Doctor Reset CSSなどの「リセットCSS」と呼ばれるものを使用しています。

リセットCSSでsupタグのスタイリングがリセットされている場合は、意図した表示とならないことがあります。そうすると、結局スタイリング用の記述をCSSのどこかに組み込むことになります。それなら最初から上付き「※」用のクラス名を独自で用意してスタイルの記述をしておくほうが効率的ですし、コントロールもしやすいかと思います。

まとめ

今回は、私がよく使う上付き「※」を表現するスタイリングの記述を紹介しました。
プロパティ2つで書けるので難易度は低いかと思います。フォントサイズの指定だけは、pxなどの絶対値ではなくemやremなどの相対値で指定するように気を付けます。

上付き「※」は結構見かけるので、この記述をもはやスニペット化して使っています。
もっとも私の場合、実務ではCMSや開発ルールの都合により、この記述に限らずスタイリングはstyle属性やstyleタグを用いて書くことが多いのですが…(最近ちょっとずつCSSも増えてきたかな)。

ここまで読んでいただき、ありがとうございました。

参考URL

<sup>: 上付き文字要素 – HTML: HyperText Markup Language | MDN

この記事を書いた人
葵

28歳未経験から、職業訓練校を経てWebコーダーに。
日々の勉強の記録や、普段使用している技術やツールなどを書き残すためにブログをはじめました。
どうぞよろしくお願いいたします。

著者をフォローする
CSS
スポンサーリンク
著者をフォローする
Web制作向上ダイアリー

コメント

タイトルとURLをコピーしました