この記事は、HTMLのタグについて、『なんとなくで使えている』方へにむけて一度タグの意味と種類を確認してみよう的な感じの記事です。

実際は感覚的にどういうタグかわかっていればコードは書けるけど、ある程度かけるようになったからこそ、一歩先の『正しい使い方』や『もっといい使い方』等理解を深めて行けたらなあと思っています。

なお、本記事の内容はHTMLクイックリファレンスを参考文献として、より具体的に実際のコードを見ながら解説していきます。

テキストの表現

part2～①文書情報・構造～ではHTMLタグの分類の『①文書情報・構造』について解説しました。

文書情報・構造タグは、主に文書そのものの情報や構造を構成するタグでした。

今回の、②テキストの表現は、実際にテキストをブラウザ上に表示する際に、装飾をつけるものとなります。え？テキストの装飾はCSSですればいいんじゃないの？と思われた方もいると思います。

実際に、『非推奨』とされているタグも多くあり、僕もこれらのコードを記述することはほとんどありません(てか、こんなんあったんや・・・ってマジで思った。)。

そのため、このようなタグもあるのか程度に知っていただければと思います。

では、代表的なものを一つ一つ解説していきます。

<FONT>・・・フォントの種類、大きさ、色を指定する

<FONT>はフォントの種類、大きさ、色を指定することができるが、これらはスタイルシートで指定することが推奨されています。実際に今回僕もこのタグを使ってみて『スタイルシートを使った方が、変更が簡単ではるかに自由度が高い』と感じました。

フォントの種類の指定

下記コードを参照していただきたい。フォントの種類はface属性で指定します。『，』で区切って複数種類指定できる点や、先に記述したフォントが優先される等基本的なところはCSSで記述する場合と違いはありません。

フォントの大きさの指定

フォントの大きさはsize属性で指定します。デフォルトのサイズはsize=”3″で1が最も小さく、数字が上がるごとにサイズが大きくなっていくようになります（最大値７）。また、デフォルトの3のサイズに対して相対的な大きさも指定することができ、その際は基準を3として+1(サイズ4),+2(サイズ5)などのように+-で記述します。

フォントの色を指定する

フォントの色はcolor属性で指定します。指定方法は、カラー名と１６進数表記の二種類となります。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

他字体の指定

これらは非推奨とはなっていないが、先ほどの<FONT>同様、スタイルシートで指定した方がはるかに自由度が高いので、そっちが推奨されています。

＜I＞・・・斜体指定

<I>で囲まれたテキストは斜体（Italic）となります。

<B>・・・太字指定

<B>で囲まれたテキストは太字となります。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

線の指定

こちらも非推奨とはなっているものもあり、上記同様、スタイルシートで指定した方がはるかに自由度が高いので、そっちが推奨されています。非推奨多いですね・・（笑）

<U>・・・下線を引く

<U>に囲まれたテキストはアンダーラインがつきます。

<S><STRIKE>・・・打消し線を引く

<S>,<STRIKE>に囲まれたテキストには打消し線が付きます。どちらも機能は同じで、<STRIKE>の方がブラウザのサポート面で汎用性が高いです。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

<BR>・・・改行

<BR>とは、breakの略でブラウザ上に表示される文章などを改行する際に使用します。HTMLコード内に開業を入れても、半角スペースと認識されるため実際にブラウザ上で改行をするためには、改行したいテキストの前に<BR>を記述します。

クイックリファレンスにも記載してあるが、改行の使用上の注意点としては、レスポンシブ対応のサイトを作成するときなどは、やみくもに改行を入れると変なタイミングで改行が入ったりするので注意が必要です。

レスポンシブ対応のレイアウト目的には、ブロックレベルの要素で分けたり、幅を指定した<TABLE>のセル内にテキストを流し込む方法が適切です。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

まとめ

代表的な 【テキストの表現】のタグについてみてきました。繰り返しになりますが、これらはスタイルシートで指定するのが推奨されています。

ABOUT AUTHOR

シュウヘイ

フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。