2乗のような上付き文字、下付き文字など、文字を装飾するHTMLタグ一覧

htmlタグが書かれた画像

HTMLで2乗のような上付き文字、下付き文字を表示させるsupタグとsubタグ

supとsubタグを使えば、上付き文字、下付き文字を
表示させることができます。

上付き文字、下付き文字とは「a2」や「CO2
の2のような文字です。

二乗や元素記号のようなものはこのタグを使って表示させないと
わかりにくいばかりか意味が異なってしまいますので注意が必要です。

コーディング例は、


a<sup>2</sup>

CO<sub>2</sub>


のようになります。
このコードでブラウザに表示させたものが下記になります。


a2

CO2


このようにすることで2乗や3乗、元素記号がHTMLで書けるようになります。


HTMLで文字に取り消し線を入れるsタグ

sタグで文章を囲めば、その文章に取り消し線が入り、
その文章がすでに正確ではなくなったことを示す
ことができます。

例えば、商品の値段が今までとは変わったことを
表示したい場合、元の価格をsタグで囲み、
新しい価格は普通に表示させれば見た人に
わかりやすくなります。

記述例は、


<p>
  <s>1個600円</s>
</p>

<p>
  今なら一個400円!
</p>


のように記述します。

上記コードでブラウザでの表示例は下記です。


1個600円

今なら一個400円!


ちゃんとsタグで囲んだ文字に取り消し線が表示されていますね。

また、sタグと同じように取り消し線を入れられるHTMLに
「<Strike>~</Strike>」と「<Del>~</Del>」があります。


HTMLで漢字に振り仮名をつけるrubyタグ

rubyタグを使えば漢字に「ふりがな」をつけることができます。

サンプルコードは下記のようになります。


<ruby>

  振り仮名<rp>(</rp><rt>フリガナ</rt<rp)</rp>

</ruby>


少々ややこしいコードになってしまいますが、

まずふりがたをふりたい漢字を「ruby」タグで囲みます。
次に漢字を記述し、その後に「rt」タグの中にふりがなを書きます。

実際はそれでふりがなをふれるのですが、このタグはブラウザによっては
対応していない場合があるので、サンプルコードのように「rp」タグを
指定しておくことで、対応していないブラウザで訪問者が見た場合、
今回のように「rp」タグで囲まれたカッコでふりがなが囲まれて
表示されるようになります。

このコードでブラウザに表示させたものは下記になります。



振り仮名(フリガナ


また、対応しているブラウザでも表示のされかたが結構違っている
ことに注意してみてください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です