【CSS】注釈表記（※米印）をbeforeとを使って作る方法

Webサイトのページ内で注釈（※）をつけたい時、HTMLのタグと、CSSの疑似要素（before）を使えばスマートに作ることができます。

before疑似要素の基本的な使い方でもあるので、HTML・CSS初心者の方におすすめです。

この記事の目次

タグを使って文中に※を表示

まずは、タグを使って文章内に「※」マークを表示させます。
タグとは、タグで囲ったテキストを上付き文字として表示できるタグです。

<sup>※</sup>

やり方はとても簡単です。
上記コードを注釈をつけたい単語の後ろにコピペするだけ。

HTMLとデモはこのようになります。
よくみる形ですね。

このように、タグで囲ったテキストは、フォントサイズが少し小さく、上寄りで表示されます。

次に、before疑似要素を使って注釈文を作ります。

<p>HTMLとCSSを教えてくれるスクール<sup>※</sup>に通いたいです。</p>
<div class="cmt"><p>Webデザインはもちろん、WebプログラミングやWebマーケティングをしっかりと学ぶことができる民間の学校。</p></div>

先ほど「※」マークを追加した文章の下に、注釈文を追加します。
「class=”cmt”」は「comment（コメント）」の略です。
ここは任意のクラス名をつけましょう。

.cmt p::before {
	content: "※"
}

CSSは1行だけ。
これでどうなるか、結果をみてみましょう。

注釈文の頭に「※」マークが表示されました。
このままだとわかりづらいので、少し装飾をつけて注釈文とわかりやすくします。

フォントサイズを小さくして、背景に色をつけました。
よくみる注釈文の見た目になりました。

これだけでも問題ありませんが、「※」マークの下にテキストが回り込んでしまっています。
これを解消するテクニックも併せてご紹介します。

.cmt p {
	padding-left: 1em;
	text-indent: -1em;
}

注釈文全体を囲っているタグ（デモの場合はタグ）に、上記CSSを追記します。

すると、このように回り込まないようになります。
文章が何行になってもインデントが空くので、HTML上で全角のスペースを入れる必要はなくなります。

before疑似要素とタグを使って注釈文を作る方法をご紹介しました。

Webサイトを作る上で注釈を入れるシーンは多々あると思います。
このようにマークアップすれば、見やすくシンプルに作れるのでおすすめです。