fontタグを使うのはやめよう
HTML5で廃止されたタグでも述べましたが、<font>はHTML5で廃止されたため、使用していたらやめるべきなのですが、その為にはHTML5で使用できるタグなどを使った形に書き換える必要があります。
今回は、<font>をHTML5に対応した形に置き換える方法について紹介いたします。
fontタグを置き換える方法
<font>を置き換えるには、主に以下の2つの方法があります。
- <span style="～">のように、<font>で指定していた内容をstyleで指定する方法。
- <span class="sample">のようにclass付けて.sample { ～ }のようにcssで指定する方法。
1の方は記述が少なくて済むという利点があり、一方2の方は他にもその内容を使っているところがあれば、そこに同じclassをつければそちらも指定できるという利点があります。状況に応じて使い分けてください。
<font size="～">を置き換える方法
文字の大きさを指定する<font size="～">を置き換えるには、以下のようになります。
<span style="font-size: ～;"><span class="sample">
※cssの記載
.sample { font-size: "～"; }
なお、<font size="～">のときは1～7の数字、または「+2」や「-1」のように+か-をつけた数字で大きさを指定していましたが、「font-size」を用いた方法はpxや%で指定すると違いがあるため注意してください。「font-size」での大きさの指定の方法につきましては、font-sizeで文字の大きさを指定する方法についてもご確認ください。
<font color="～">を置き換える方法
文字の色を指定する<font color="～">を置き換えるには、以下のようになります。
<span style="color: ～;"><span class="sample">
※cssの記載
.sample { color: "～"; }
なお、<font color="～">も書き換えた後も両方色の指定の方法は「#000000」のようなRGBカラーコードか、「Black」のような色名であり、<font color="～">のときと同じものを指定すれば大丈夫です。
RGBカラーコードについて知りたい場合は、RGBカラーコードで色を指定する方法やRGBカラーコード色サンプルもご確認ください。
<font face="～">を置き換える方法
文字のフォントを指定する<font face="～">を置き換えるには、以下のようになります。
<span style="font-family: ～;"><span class="sample">
※cssの記載
.sample { font-family: "～"; }
なお、<font face="～">も書き換えた後も両方フォントの指定の方法は「ＭＳ Ｐゴシック」や「ヒラギノ角ゴ Pro W3」のようなフォント名であり、<font face=="～">のときと同じものを指定すれば大丈夫です。
まとめ
以上、<font>をHTML5に対応した形に置き換える方法についてご紹介させていただきました。
<font>に限らず、HTML5で廃止となったタグはHTML5に対応した形に置き換える必要があります。皆さんも今一度、廃止になったタグを使っていないか確認してみた方がよいでしょう。
