文字装飾
■概要
HTMLには文字の強調、線引き、斜体など様々な文字装飾のタグが用意されています。
■強調
文章の中の特定の文字を強調させたい場合は「strong」か「b」タグを使用します。
●strong
・書式例
<strong> ~ </strong>
・具体例
<strong>strongによる強調文字</strong>
表示結果:
strongによる強調文字
●b
・書式例
<b> ~ </b>
・具体例
<b>bによる強調文字</b>
表示結果:
bによる強調文字
●strongとbの違い
strongとbの違いはstrongが論理的強調、bが視覚的強調です。
論理的強調は文章中に内容をより意識させたいと考えた時に使用し、
視覚的強調は文章の内容の強調よりも、文字の見た目を重視したい場合に使用します。
・使用頻度
strongとbの使用頻度はstrongの方が多いです。
理由としてはstrongを使用すると検索エンジンにも
強調文字として認識され、重要語句として扱われるので、
SEO対策として基本的にstrongが使用されています。
・注意点
strongを使用しすぎないように注意して下さい。
上で書いている通り、strongを使用すると重要語句として
検索エンジンが認識してくれることになりますが、
1つのページで乱用しすぎると、どれが重要なのかが分からなくなったり、
最悪の場合はスパム扱いされます。
強調したい文字が多くなる場合は、ページ内の内容を加味した上で
strongにするのか、bにするのかを決めてください。
■斜体
文章の中の特定の文字を斜体にしたい場合は「em」か「i」タグを使用します。
●em
・書式例
<em> ~ </em>
・具体例
<em>emによる斜体文字</em>
表示結果:
emによる斜体文字
●i
・書式例
<i> ~ </i>
・具体例
<i>iによる斜体文字</i>
表示結果:
iによる斜体文字
●emとiの違い
emとiの違いは「●strongとbの違い」で記述している内容と同じで
論理的か、視覚的かの違いになります。
emは強調の意味も含んでおり、強調タグとしても扱われています。
強調の度合いとしては「strong > em」となっており、
strongの方が強い強調として扱われています。
■線引き
文字に対して下線や打消し線を使用する場合は「u」や「strike」を使用します。
●下線
「u」は指定した文字に対して下線を引きます。
・書式例
<u> ~ </u>
・具体例
<u>uで下線を引く</u>
表示結果:
uで下線を引く
●打ち消し線
「strike」は指定した文字に対して打ち消し線を引きます。
・書式例
<strike> ~ </strike>
・具体例
<strike>文字をstrikeで打ち消す</strike>
表示結果:
文字をstrikeで打ち消す
■ルビ
漢字などの文字に対してルビを振りたいときは「ruby」と「rb、rt」を使用します。
「ruby」と「rb、rt」はセットで使います。
●書式例
<ruby><rb>文字列<rt>ルビ</ruby>
●具体例
<ruby><rb>潰瘍性大腸炎<rt>かいようせいだいちょうえん</ruby>
表示結果:
潰瘍性大腸炎
■上付き文字、下付き文字
計算の数式などで必要な上付き、下付きの文字を使用したいときは
「sup」「sub」を使用します。
●sup
・書式例
<sup> ~ </sup>
・具体例
int sqr = 4<sup>2</sup>
表示結果:
int sqr = 42
●sub
・書式例
<sub> ~ </sub>
・具体例
CO<sub>2</sub>
表示結果:
CO2