文字装飾タグ（HTML・CSS）
文字を装飾するためのHTMLタグおよびCSSデザイン定義をご紹介します。
サイトやブログにおいて文字色や大きさを変えたり
太字や下線を引いて強調したりすることはよくあることです。
かなり頻繁に使いますので、是非覚えておきましょう。
文字の色を変える
HTMLタグ
<span style="color:#ff0000;">おはようございます。</span>
spanタグを使いstyle属性のcolorで色を指定します。span以外にもstyle属性を指定すれば使えます。
CSSデザイン
【HTML】
<p>おはようございます。</p>
【CSS】
p{ color:#ff0000; };
colorで文字色を指定します。
文字の大きさを変える
HTMLタグ
<span style="font-size:30px;">おはようございます。</span>
spanタグを使いstyle属性のfont-sizeで大きさを指定します。span以外にもstyle属性を指定すれば使えます。
CSSデザイン
【HTML】
<p>おはようございます。</p>
【CSS】
p{ font-size:30px; };
font-sizeで文字の大きさを指定します。
太字にする
HTMLタグ
<b>おはようございます。</b>
<strong>おはようございます。</strong>
太字にするHTMLタグはbタグとstrongタグの２種類があります。どちらも表示上は変わりません。
bタグは視覚的な強調ですが、strongタグは内容的にも強調されるタグです。
strongタグは検索エンジンからも重要視されます。ただ使いすぎるとスパムになります。
CSSデザイン
【HTML】
<p>おはようございます。</p>
【CSS】
p{ font-weight: bold; };
font-weightでboldを指定することによって太字に変わります。
ちなみにfont-weightでnormalを指定すると標準の文字の太さになります。
斜体にする
HTMLタグ
<i>おはようございます。</i>
<em>おはようございます。</em>
太字と同様、斜体のHTMLタグもiタグとemタグの２種類があります。どちらも表示上は変わりません。
iタグは視覚的な強調、emタグは内容的にも強調されるタグです。
CSSデザイン
【HTML】
<p>おはようございます。</p>
【CSS】
p{ font-style: oblique; };
font-styleでobliqueを指定することによって斜体に変わります。
ちなみにfont-styleでitalicを指定するとイタリック体になりますが日本語では見た目上ほとんど斜体と変わりません。
下線を引く
HTMLタグ
<u>おはようございます。</u>
下線を引く場合にはuタグを使用します。
CSSデザイン
【HTML】
<p>おはようございます。</p>
【CSS】
p{ text-decoration:underline; };
text-decorationでunderlineを指定することによって下線が引けます。
取り消し線を引く
HTMLタグ
<s>おはようございます。</s>
取り消し線を引く場合にはsタグを使用します。訂正などをおこなう際に使用します。
CSSデザイン
【HTML】
<p>おはようございます。</p>
【CSS】
p{ text-decoration:line-through; };
text-decorationでline-throughを指定することによって取り消し線が引けます。
