htmlのみで文字を装飾する方法（太字,下線,文字色,大きさ変更）

「CSSはよくわからない！手早く簡単に文字を装飾したい！」

htmlのみで文字を装飾（太字・下線・文字色・大きさなど）する方法を紹介します。

なお、htmlだけでは限界があったり、廃止されていたりするため、style属性を使ったCSSの方法も紹介しています。でも大丈夫です。CSSファイルを使わずhtmlファイルだけで完結します。

装飾一覧

太字	<b>
下線	<u>
斜め	<i>
大きさ	<span style="font-size:数字%;">
文字色	<span style="color:カラーコード;">
書体	<span style="font-family:書体名;">
背景色	<span style="background:カラーコード;">
枠線	<span style="border:太さ 種類 カラーコード;">
外側余白	<span style="margin:0 数字px;">
内側余白	<span style="padding:○px ○px;>
中央寄せ	ブロック要素の親にstyle="text-align:center;
右寄せ	ブロック要素の親にstyle="text-align:right;

下記で詳しく解説します。

なお、例では装飾の違いがわかるように、前後に無装飾のテキストを設置しています。

文字そのものの装飾

太字：<b>

太字にする箇所をbタグで囲みます。

前テキスト<b>太字テキスト</b>後ろテキスト

下線：<u>

下線をつける箇所をuタグで囲みます。

前テキスト<u>下線テキスト</u>後ろテキスト

斜め（半角英数のみ）：<i>

斜め文字にする箇所をiタグで囲みます。

ただし全角（日本語）は斜めになりません。

前テキストtext<i>斜めテキストitalictext</i>後ろテキストtext

大きさ：<span style="font-size:○%;">

大きさを変えたい箇所をspanタグで囲み、style属性でCSSのfont-sizeを指定します。

元の大きさを100%として数値を指定しましょう。

前テキスト<span style="font-size: 150%;">大きさ変更</span>後ろテキスト

fontタグのsize属性でも文字の大きさを変えられますがfontタグは廃止されています。

前テキスト<font size="5">大きさ変更</font>後ろテキスト

文字色：<span style="color:○;">

文字色を変えたい箇所をspanタグで囲み、style属性でCSSのcolorを指定します。

colorにはカラーコードを指定します。

前テキスト<span style="color: red;">文字色変更</span>後ろテキスト

カラーコードについて詳しくはこちら↓

fontタグのcolor属性でも文字色を変えられますがfontタグは廃止されています。

前テキスト<font color="red">文字色変更</font>後ろテキスト

書体：<span style="font-family:○;">

フォント（書体）を変えたい箇所をspanタグで囲み、style属性でCSSのfont-familyを指定します。

font-familyには書体名を指定します。

前テキスト<span style="font-family:游明朝 Medium;">游明朝書体</span>後ろテキスト

よく使うフォントの一覧はこちら↓

fontタグのface属性でも書体を変えられますがfontタグは廃止されています。

前テキスト<font face="游明朝 Medium">游明朝書体</font>後ろテキスト

文字枠の装飾

背景色：<span style="background:○;">

背景色を指定したい箇所をspanタグで囲み、style属性でCSSのbackgroundを指定します。

backgroundにはカラーコードを指定します。

前テキスト<span style="background: yellow;">背景色テキスト</span>後ろテキスト

枠線：<span style="border:○;">

枠線を指定したい箇所をspanタグで囲み、style属性でCSSのborderを指定します。

borderには太さと種類と色を指定します。

前テキスト<span style="border: 1px solid #333;">枠線テキスト</span>後ろテキスト

borderについて詳しくはこちら↓

外側余白：<span style="margin:0 ○px;">

枠線の外側に余白を作るにはspanタグのstyle属性にmarginを指定します。

marginの値は上下 左右と指定しますが、上下は効かないので0を指定しましょう。

下記例では「内側余白」との違いが分かるように枠線と背景を付けています。

前テキスト<span style="margin: 0 10px;">外側余白</span>後ろテキスト

marginとpaddingについて詳しくはこちら↓

内側余白：<span style="padding:○px ○px;>

枠線の内側に余白を作るにはspanタグのstyle属性にpaddingを指定します。

paddingの値は上下 左右と指定します。上下は一応効きますが縦に伸びないため小さめの値を指定しましょう。

下記例では「外側余白」との違いが分かるように枠線と背景を付けています。

前テキスト<span style="padding: 5px 10px;">内側余白</span>後ろテキスト

文字の位置調整

中央寄せ：ブロック要素の親にstyle="text-align:center;

文字を中央寄せにするには、文字の親にtext-align:centerを指定します。

親はdivやp、h1などのブロック要素でなくてはいけません。

<div style="text-align: center;">テキスト中央寄せ</div>

ブロック要素とインライン要素について詳しくはこちら↓

align属性でも位置調整できますが廃止されています。

<div align="center">テキスト中央寄せ</div>

右寄せ：ブロック要素の親にstyle="text-align:right;

文字を中央寄せにするには、文字の親にtext-align:rightを指定します。

親はdivやp、h1などのブロック要素でなくてはいけません。

<div style="text-align: right;">テキスト右寄せ</div>

align属性でも位置調整できますが廃止されています。

<div align="right">テキスト右寄せ</div>

複数指定するとき

「太字でかつ赤字にしたい！」というように複数の装飾を指定する方法を紹介します。

htmlタグが違うとき

htmlタグが違うときはそのhtmlタグの分だけ囲います。

<b><span style="color: red;"><u>太字赤文字下線</u></span></b>

htmlタグが同じで属性が違うとき

htmlタグが同じで属性が違うときは同じhtmlタグに複数の属性を指定します。

属性の順番は自由です。

<font color="red" size="5">文字色サイズ変更</font>

属性について詳しくはこちら↓

style属性で違うCSSのとき

style属性内で「;」に続けてCSSを記述します。

CSSの順番は自由です。

<span style="padding: 5px 10px; background: yellow; border: 1px solid #333;">背景色枠線内側余白</span>

【まとめ】htmlのみで文字を装飾する方法

太字	<b>
下線	<u>
斜め	<i>
大きさ	<span style="font-size:数字%;">
文字色	<span style="color:カラーコード;">
書体	<span style="font-family:書体名;">
背景色	<span style="background:カラーコード;">
枠線	<span style="border:太さ 種類 カラーコード;">
外側余白	<span style="margin:0 数字px;">
内側余白	<span style="padding:○px ○px;>
中央寄せ	ブロック要素の親にstyle="text-align:center;
右寄せ	ブロック要素の親にstyle="text-align:right;

以上、htmlのみで文字を装飾する方法でした。