ホームページ作成講座 めもタグ

トップページ | ホームページ講座 | HTML | CSS | 素材 | リンク

トップページ > 初心者向けホームページ作成講座 > 文字色を指定する/文字を修飾する

文字色を指定する/文字を修飾する

一部の文字色・文字サイズ・フォント（文字の書体）を変更には
<FONT>タグを利用します。
文字色・サイズ・フォントは同時に指定することができ、その場合
半角スペースで区切って指定します。

spacer

文字の色を変更する

一部の文字色を変えるには color="" に色を指定します。
<body>タグで全体の色を変えていても<FONT color="文字色">〜</FONT>で囲まれた
部分だけ色を変えることができます。
色の指定には、色名またはカラーコードが用いられます。
詳しいカラーコード・色名については「色一覧」へ。

記述例

<HTML>
<HEAD>
<TITLE>文字の色を変更する</TITLE>
</HEAD>
<BODY>
<FONT color="red">文字列</FONT><BR>
タグで囲んだ部分だけ<FONT color="#0000FF">青色</FONT>にしてみました。
</BODY>
</HTML>

ブラウザでプレビュー

文字列
タグで囲んだ部分だけ青色にしてみました。

spacer

文字の大きさを変更する

文字のサイズを変えるには<FONT>の size="" に１〜７までの大きさを指定します。

記述例

<HTML>
<HEAD>
<TITLE>文字の大きさを変更する</TITLE>
</HEAD>
<BODY>
<FONT size="1">文字列 サイズ1</FONT><BR>
<FONT size="2">文字列 サイズ2</FONT><BR>
<FONT size="3">文字列 サイズ3</FONT><BR>
<FONT size="4">文字列 サイズ4</FONT><BR>
<FONT size="5">文字列 サイズ5</FONT><BR>
<FONT size="6">文字列 サイズ6</FONT><BR>
<FONT size="7">文字列 サイズ7</FONT><BR>
一部分だけ<FONT size="1">大きさを変える</FONT>こともできます。<BR>
<FONT size="5" color="blue">色と大きさを同時に指定</FONT>
</BODY>
</HTML>

ブラウザでプレビュー

文字列 サイズ1
文字列 サイズ2
文字列 サイズ3
文字列 サイズ4
文字列 サイズ5
文字列 サイズ6
文字列 サイズ7
一部分だけ大きさを変えることもできます。
色と大きさを同時に指定

文字サイズを相対指定することもできます。
相対指定とは、現在の文字の大きさに対して増減させる方法で
-7〜+7の範囲で指定できます。
ただし、文字サイズ1〜7を超えて大きくすることはできません。

記述例

<HTML>
<HEAD>
<TITLE>相対指定</TITLE>
</HEAD>
<BODY>
<FONT size="-2">文字列</FONT><BR>
<FONT size="-1">文字列</FONT><BR>
「大きさの指定がない文字の大きさは３」
<FONT size="+1">文字列</FONT><BR>
<FONT size="+2">文字列</FONT><BR>
<FONT size="+3">文字列</FONT><BR>
<FONT size="+4">文字列</FONT>
</BODY>
</HTML>

ブラウザでプレビュー

文字列 -2
文字列 -1
「大きさの指定がない文字の大きさは３」
文字列 +1
文字列 +2
文字列 +3
文字列 +4

spacer

文字の書体を変更する

書体（フォント）を変更するには face="" でフォントを指定します。

記述例（ＭＳ 明朝）

<HTML>
<HEAD>
<TITLE>文字の書体を変更する</TITLE>
</HEAD>
<BODY>
文字をＭＳ 明朝にします。<BR>
文字を「<FONT face="ＭＳ 明朝">ＭＳ 明朝</FONT>」にしました。
</BODY>
</HTML>

ブラウザでプレビュー（ＭＳ 明朝）

文字をＭＳ 明朝にします。
文字を「ＭＳ 明朝」にしました。

記述例（Impact 半角英数字限定のフォントで全角文字は不可）

<HTML>
<HEAD>
<TITLE>Impact</TITLE>
</HEAD>
<BODY>
「Cool!」をImpactにします。<BR>（半角英数字限定）
<FONT face="Impact">Cool!</FONT>
</BODY>
</HTML>

ブラウザでプレビュー（Impact）

「Cool!」をImpactにします。（半角英数字限定）
Cool!

Windows、mac等のOSによっては入っていないフォントも
あります。入っていない環境で表示した場合別のフォントに
置き換わります。

フォントに関しては「フォント一覧（作成中）」へ。

spacer

文字をボールド(太字)にする

文字をボールド(太字)にするには<STRONG>または<B>タグを使います。
<STRONG>と<B>を使用した時の見た目はほぼ同じですが
<STRONG>の強調度は高く、検索ワードに利用される場合があります。

記述例

<HTML>
<HEAD>
<TITLE>文字をボールド(太字)にする</TITLE>
</HEAD>
<BODY>
文字を<B>ボールド</B>にします。<BR>
STRONGでも<STRONG>ボールド</STRONG>にできます。
</BODY>
</HTML>

ブラウザでプレビュー

文字をボールドにします。
STRONGでも太字にできます。

spacer

文字をイタリック(斜体文字)にする

文字をイタリック(斜体文字)にするには<EM>または<I>タグを使います。
<EM>と<I>を使用した時の見た目はほぼ同じですが
<EM>の強調度は高く、検索ワードに利用される場合があります。

記述例

<HTML>
<HEAD>
<TITLE>文字をイタリック(斜体文字)にする</TITLE>
</HEAD>
<BODY>
文字を<I>イタリック</I>にします。<BR>
EMでも<EM>斜体文字</EM>にできます。
</BODY>
</HTML>

ブラウザでプレビュー

文字をイタリックにします。
EMでも斜体文字にできます。

spacer

文字にアンダーライン（下線）を引く

文字にアンダーライン（下線）を引くには<U>タグを使います。

記述例

<HTML>
<HEAD>
<TITLE>文字にアンダーライン（下線）を引く</TITLE>
</HEAD>
<BODY>
文字に<U>下線を</U>引きます。
</BODY>
</HTML>

ブラウザでプレビュー

文字に下線を引きます。

spacer

文字に取り消し線を引く

文字に取り消し線を引くには<S>または<STRIKE>タグを使います。

記述例

<HTML>
<HEAD>
<TITLE>文字に取り消し線を引く</TITLE>
</HEAD>
<BODY>
<S>通常価格2000円</S>　特別価格750円で販売します。<BR>
<STRIKE>送料500円</STRIKE>　送料無料！
</BODY>
</HTML>

ブラウザでプレビュー

通常価格2000円　特別価格750円で販売します。
送料500円　送料無料！

spacer

前の講座：ホームページの文字・背景・リンクの色を変更 | 次の講座：罫線を引く/リストを作成する | トップページ | ページの一番上へ▲