文字の色を指定する

文字の色を指定する文字の色を指定する表示例

文字(フォント)の色を指定するのは、2通りの方法があります。

<font>タグを使う
<font color="★"> ~ </font>

と記述する「★」はWebカラーネームやカラーコードで記述します。

スタイルシートで指定する
<head> ~ </head>タグ内にスタイルシートの記述をしフォントのカラーを指定します。

.iro1 { color: ★; }

そして<body> ~ </body>タグ内

<span class="iro1">ここに色がつく</span>

文字の色の指定はスタイルシートを使うことが推奨されています。

<font>タグを使う場合のHTML/XHTML

<p>虹の色は7色です。<br />
<font color="#E60012">赤</font>・
<font color="#F39800">橙</font>・
<font color="#FFF100">黄</font>・
<font color="#009944">緑</font>・
<font color="#0068B7">青</font>・
<font color="#1D2088">藍</font>・
<font color="#920783">紫</font>
の順番です。</p>

スタイルシートを使う場合のHTML/XHTML

<p>虹の色は7色です。<br />
<span class="aka">赤</span>・
<span class="#daidai">橙</span>・
<span class="ki">黄</span>・
<span class="midori">緑</span>・
<span class="ao">青</span>・
<span class="ai">藍</span>・
<span class="murasaki">紫</span>
の順番です。</p>

スタイルシートを使う場合のCSS

<style type="text/css">
<!--
.aka { color: #E60012; }
.daidai { color: #F39800; }
.ki { color: #FFF100; }
.midori { color: #009944; }
.ao { color: #0068B7; }
.ai { color: #1D2088; }
.murasaki { color: #920783; }
-->
</style>

文字の色を指定する表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録