【CSS】注釈表記(※)をbeforeとを使って作る方法 コーディング

【CSS】注釈表記(※米印)をbeforeと<sup>を使って作る方法

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

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

スポンサーリンク

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

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

<sup>※</sup>

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

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

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

スポンサーリンク

before疑似要素を使って注釈文を作る

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

HTML

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

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

CSS

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

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

デモ

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

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

スポンサーリンク

「※」マークの下にテキストが回り込まないようにしたい

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

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

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

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

スポンサーリンク

まとめ

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

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