どうも7noteです。必須項目と分かるように装飾を作る方法

今回はCSSで上付き文字を作ります。こんな感じです。

作り方

<p>お名前<span>※</span></p>

span{
  color: red;             /* 文字色を赤にする */
  font-size: 0.5em;       /* 文字サイズを半分にする */
  vertical-align: super;  /* 上付き文字にする */
}

上付きにしたい文字を<span>で囲み、vertical-align: super;で上に配置します。
vertical-alignはインライン要素にしか効かないので、注意が必要です。

<sup>は使うな！

似たようなことができる要素として<sup>というものがありますが、<sup>はその文字がないと意味が変ってしまうものにしか使わないというのが推奨の使い方になります。

たとえば、H²Oとか、E=mc²とかその文字が上付き文字でなくなってしまうと意味が変ってしまいます。
このような文字の場合にのみ<sup>を使います。

まとめ

勉強しはじめの頃、vertical-alignを使っていると上手く効いたり効かなかったリするので、必ずその要素がインライン要素かどうかを確認するよう注意してください。

おそまつ！