みずー工房

気ままライフを綴るブログです

【HTML】太字・斜字・横線など

HTMLで太字や斜字など、標準のタグで文字に装飾を施す方法を一部紹介します。
一部は、はてなブログの機能で簡単に装飾できます。



ブログを書く際に、文字に装飾を施したい時がありますが、
これらは標準に用意されているhtmlタグで、簡単に行うことができます。


ツールバーでもできる装飾

はてな標準のツールバーから装飾できるhtmlタグです。


bタグ

ツールバーから、文字を選択して装飾することもできます。

HTML
<b>こんな感じで太字にすることができます。</b>
Result
こんな感じで太字にすることができます。


iタグ

ツールバーから、文字を選択して装飾することもできます。

HTML
<i>こんな感じで斜字にすることができます。</i>
Result
こんな感じで斜字にすることができます。


sタグ

ツールバーから、文字を選択して装飾することもできます。

HTML
<s>こんな感じで打ち消し線を引くことができます。</s>
Result
こんな感じで打ち消し線を引くことができます。


uタグ

ツールバーから、文字を選択して装飾することもできます。

HTML
<u>こんな感じでアンダーラインを引くことができます。</u>
Result
こんな感じでアンダーラインを引くことができます。


ツールバーの装飾を拡張する

ツールバーでできる装飾を拡張する方法を紹介します。
ここでの拡張というのは、文字の大きさや色などhtmlタグの属性(style)を変更することです。


spanタグ

HTML
<span style="color: #ff0000;">spanタグは、囲った表示の仕方を変更できるインライン要素です。</span><br>
<span style="font-size: 150%">style内にCSSを記述すると、スタイルを適用できます。</span>
Result
spanタグは、囲った表示の仕方を変更できるインライン要素です。
style内にCSSを記述すると、スタイルを適用できます。

colorの後の"#ff0000"はカラーコードといい、RGBの順番で指定することで変更できます。
font-sizeの後の"150%"は、1文字の設定に比較して文字の大きさを1.5倍にします。
パーセント以外の単位も設定できます。
RGBカラーコードと文字の大きさについては、別の記事にしようと思います。


ツールバーにないhtmlタグ

ツールバーからは指定できないタグです。


brタグ

HTML
強制改行することができるタグです。<br>こんな感じ
Result
強制改行することができるタグです。
こんな感じ


見たままモードを使っている方は、[Shift]+[Enter]で挿入できます。


centerタグ

HTML
<center>中央揃えにできます。ちなみにspanタグでもできます。</center>
Result
中央揃えにできます。ちなみにspanタグでもできます。


おわりに

CSSを使えば、spanタグなどはほぼ無限にデザインを変更することができます!
紹介したタグは一部ですので、ぜひいろいろ調べてオリジナルなブログにしましょう!