Ｗｅｂページ全体の文字色
colorコマンドは、文字の色を決めるコマンドです。この使い方について、詳細に述べたいと思います。
bodyタグに適用
文字の色を変更できるコマンドは、colorコマンドです。具体的に、Ｗｅｂページ全体の文字色を変える場合には、次の例に示すように、文書全体を包括しているbodyタグに、colorコマンドを適用します。
● bodyタグにcolorコマンドを適用した例
<body style="color: green;">
この例では、文書全体が緑色になります。
通常の文書の色
27.文字色と背景色の組み合わせでも述べましたが、文書を読みやすくするためには、文字色と背景色のコントラスト差を大きくする必要があります。
ところが、背景色が白で、文字色が黒だと、コントラスト差が大きすぎて、心理的に文書が堅いイメージに見えてしまいます。そこで、「おふとんの人」でも設定していることですが、文字色を暗いグレーに設定します。
<body style="color: #404040;">
次の例は、上段は「#000000」、下段は「#555555」です。#555555の方が、少し柔らかい文に見えませんか？
● #000000の例
テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書
● #555555の例
テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書テスト文書
ちなみに、おふとんの人では、#404040を採用しています。
リンクの文字色を変える
リンクの色を変える
例えば次の例をご覧ください。
<p style="color: red;"><a href="#">test</a></p>
これをブラウザで表示させると、リンクの色はどのようになるでしょうか？。初期設定の色のままでしょうか？。それとも赤でしょうか？。正解は
何も変化がありませんでした。ではここで、リンクの色を変えたい場合は、どのようにすれば良いでしょうか？。正解は、次の通りです。
● リンクの色を変える場合のスタイル設定
<p><a href="#" style="color: red;">test</a></p>
● リンクの色を変えたときの表示結果
このように、直接aタグにcolorコマンドを設定すれば、リンクの色が変わります。ページ中のすべてのaタグの色を変更したい場合は、スタイルシートを使って
● スタイルシートを使ったときの例
a {color: red;}
のように、タグに指定します。少し応用すると、29.CSSの書き方とCSSコマンド簡単リファレンスでも説明したように、「○○○の中の△△△」のように設定ができます。例えば、divタグのid属性を使って
● id属性を指定したaタグのみ色を変更
#navi a {color: red;}
と設定することができます。この例では、「ID『navi』の中のaタグの色を変える」という具合です。
マウスが重なったときの色を変える
マウス・カーソルがリンクと重なったときに、色を変えることもできます。ちなみに、「おふとんの人」では、リンクに重なったときの色を#6666ff（薄い青）に設定しています。この方法は、タグにstyle属性で設定ができないので、スタイルシートか、headタグ内に設置したstyleタグ内に、次の文を記述すればできます。
a:hover {color: #6666ff;}
● a:hoverの表示結果
上のtestの所にマウス・カーソルが重なると、文字の色が薄い青になると思います。
一度訪れたリンクの色
リンク先のＷｅｂページに１回でも訪れた場合には、そのリンクは、紫色になると思います。この色も変えることができて、次のように設定します。
a:visited {color: 好きな色;}
ここで、「好きな色」の所に、好きな色を設定してください。これらの色は、27番外編.リンクの色と背景色の関係を参考にしてください。
文書の一部の色を変える
特別な意味のある文書
bodyタグでは、文書全体に対して適用しましたが、例えば見出しや、強調する単語の色を変えたい場合があります。例えば、次のようなタグを用いる場合です
- h1～h6
- strong
- em
これらも、スタイルシートで設定するときは、aタグで説明したように、タグ名を書いたその後にcolorコマンドを指定します
● strongタグにcolorコマンドを適用した例
strong {color: red;}
ここで、emタグに適用する場合は、この記述例のstrongの所をemに変えるだけです。
単に色を変えたい
h1タグやstrongタグを使わないで、Ｗｅｂページ上の１箇所だけ色を変えたい場合があります。そういったときは、divタグやspanタグを使います。
divタグは、22.divタグで領域確保で説明したように、領域を確保するためのタグです。divタグにcolorコマンドを適用すると、divタグで囲まれた領域すべてに、colorコマンドが適用されることになります。
● divタグの文字の色を変更する
<div style="color: red;">ここに指定した文字の色が変わる。</div>
● 表示結果
ここに指定した文字の色が変わる。
divタグの場合は、divで指定した領域全体の色が変わりますが、領域全体ではなく、一部の単語のみの色を変えたい場合もございます。そういった場合は、spanタグを用いて、次のように書きます。この場合、spanタグ内のみ文字の色が変わります。
● spanタグの文字の色を変更する
ここに指定した<span style="color: red;">文字の色</span>が変わる。
● 表示結果
ここに指定した文字の色が変わる。
spanタグは、ちょっと色を変えたい場合に、重宝できるタグですので、私もときどき使います。
- ← 前のページ 「32.スタイルシートで使う単位」
- 「34.displayコマンド（CSS）」 次のページ →