色 カラー

カラー color 属性を使用することによって、カラフルな表現が可能となります。画像 img 要素を読み込むよりもブラウザの表示も早くなります。ただ、色の使い方には注意が必要です。ブラウザ固有の要素があるため、思っていたような表現になってなくて驚く場合もあります。WEBセーフカラーなどを確認し設定することを、おすすめします。

HTML タグ HOMEフォーム

色 カラー 索引

色見本 カラーサンプル
ページ全体の色（背景色）を変えるには
文字の色を変えるには
文字の色を一度に変えるには
マウスを乗せたリンクテキストの色を変えるには
文字をグラデーションするには

ページ全体の色（背景色）を変えるには

ページ全体の色を変えるには、<body> タグに bgcolor 属性を指定します。

<body bgcolor="#cc0000">
  :
</body>

スタイルシートで記述する場合は次のようにします。

<style type="text/css">
<!--
body { background-color: #cc0000; }
-->
</style>


文字の色を変えるには

文字の色を変えるには、<font color="..."> を使います。

サンプル：<font color="blue">青い文字</font>
サンプル：青い文字

スタイルシート の場合は color を使います。

サンプル：<span style="color:blue">青い文字</span>
サンプル：青い文字

指定可能な色は「色見本 カラーサンプル」を参照してください。



文字の色を一度に変えるには

ページ全体の文字の色を指定するには、<body> タグに text、link、vlink、alink 属性を指定します。text はテキストの色、link はリンクテキストの色、vlink は訪問済みリンクテキストの色、alink はマウスでクリックしている途中のリンクテキストの色を指定します。

<body text="#333333" link="#009900" vlink="#006600" alink="#ff0000">
   :
</body>

上と同様の指定をスタイルシートで行う場合は、<head>～</head> の間に次のようなスタイルシートを記述します。

<style type="text/css">
<!--
body { color: #333333; }
a:link { color: #009900; }
a:visited { color: #006600; }
a:active { color: #ff0000; }
-->
</style>


マウスを乗せたリンクテキストの色を変えるには

リンクテキストにマウスを乗せたときの色を変えるには、スタイルシートの hover を用います。

<style type="text/css">
<!--
a:hover { color: #ff0000; }
-->
</style>


文字をグラデーションするには

文字をグラデーションするには、次のように一文字一文字色を指定します。

<font color="#ff00ff">こ</font>
<font color="#cc00ff">ん</font>
<font color="#9900ff">に</font>
<font color="#6600ff">ち</font>
<font color="#3300ff">わ</font>
<font color="#0000ff">ぁ</font>
こ ん に ち わ ぁ

HTML タグ HOMEフォーム