ホーム＞コース別ガイド一覧＞文字の色を指定しよう！
使用プロパティ セレクタ { color: 色; }
CSS一覧プロパティ辞典 … color プロパティ
color プロパティを使うと文字の色を指定できます。値には、「red」や「green」などの色名やカラーコードなどを入力します。色の指定方法はこちら（Webページでの色の指定方法）を参考にしてください。
使用例
では実際に見出し（h1 要素）の文字の色を赤にしてみましょう！
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
h1 { color: red;}
span { font-weight: bold;}
p .copy { font-family: "ＭＳ Ｐ明朝", serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<span>ワンポイント</span>を紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html> |
|
使用例の表示
[colorプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
|
[colorプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
前項の「使用例」のように、セレクタに h1 要素、プロパティに color プロパティを指定し、値には色名の red を入力した場合のブラウザでの表示です。また、この使用例ののセレクタで p 要素を指定すると p 要素の内容の文字列が赤になります。これで文字色の変更は大丈夫ですね！
