楽天HTML講座【文字の色を変える】～楽天うずらの今！！お買得・激安スイーツ通販

100万ポイント山分け！1日5回検索で1ポイントもらえる

199280

ホーム | 日記 | プロフィール

2009.05.04

(2)

テーマ：楽天HTML講座(13)

カテゴリ： HTML

【前回のおさらい】

前回、「文字の大きさを変える」では、道具（要素）である「font」と材料（属性）である「size」の組み合わせを行いました。文字に対して、大きさや色、フォントの種類を変えたいときに
使用すべき道具は「font」です。

文字の大きさを変える＞＞

文字の色を変える

道具（要素）	font
材料（属性）	color

文字の色を変えたいときは、

道具（要素）である「font」と材料（属性）である「color」を

下記のように組み合わせて記述にします。

HTML	表示
<font color="red">文字の色：赤色</font>	文字の色：赤色
<font color="blue">文字の色：青色</font>	文字の色：青色
<font color="green">文字の色：緑色</font>	文字の色：緑色
<font color="yellow">文字の色：黄色</font>	文字の色：黄色
<font color="purple">文字の色：紫色</font>	文字の色：紫色

【解説】

color属性には、２通りの方法で値を与えることができます。

▼　１通り目：　上記方法です。

「blue」・「red」・「yellow」・「green」など、色名で値を指定できます。

▼　２通り目：　下記方法です。

16進数で値を指定する方法です。16進数で値を指定することで、より多くの色を表現することができるので、おススメです。

HTML	表示
<font color="#ffff00">文字の色：#ffff00</font>	文字の色：#ffff00
<font color="#ffff55">文字の色：#ffff55</font>	文字の色：#ffff55
<font color="#ff0000">文字の色：#ff0000</font>	文字の色：#ff0000
<font color="#00ff00">文字の色：#00ff00</font>	文字の色：#00ff00
<font color="#daa520">文字の色：#daa520</font>	文字の色：#daa520