Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>文字の色を指定しよう!

NEXT>行の高さ
 

文字の色を指定しよう!(color プロパティ)

普通コースじっくりコースアイコンの説明普通コースじっくりコースアイコンの説明

使用プロパティ セレクタ { 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: "MS P明朝", 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 要素の内容の文字列が赤になります。これで文字色の変更は大丈夫ですね!

関連情報ページ

CSS一覧プロパティ辞典

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system