ホームページの文字・背景に色を付けるには

CSSを使って色付けするにはカラーコードを使う

CSSを使って色を付ける。と言っても色合いの指定をどうしたらいいのか困りませんか？
思い浮かんだ色を、どうやってインターネットブラウザに伝えるのかなんて始めはわかりませんよね。
赤、青、緑、黄緑など、様々な色合いをCSSを使って伝えるには、「HTMLカラーコード」を使います。

カラーコードは、16進数を使って色を指定する方法です。
例えば、#FF0000とすると赤色になります。#00FF00なら緑色、#0000FFなら青色になります。
赤緑青で何か思い浮かぶものはありませんか？

そう、「光の三原色」です。
カラーコードは、#（シャープ）から始まり、「赤赤」「緑緑」「青青」でそれぞれ混色具合を指定して作られています。
0に近づくほど色合いを薄く、Fに近づくほど色合いを濃くして発色させます。
絵具を混ぜ合わせる様に、それぞれの色を組み合わせて様々な色を表現させることができます。

ちなみに「#000000は黒」「#FFFFFFは白」になります。

カラーコードは、全て覚えないといけないものではありません

カラーコードは16進数ですので、0～9・A～Fの16文字で構成されています。それが6個組み合わさるので、16の6乗・・・16777216通りでしょうか・・・
今日初めて総数を調べましたが、思った以上に種類があって驚いています！
これはもう、覚えようという気力すらなくなる数字ですね。

これだけの種類の色がありますが、パソコンのモニターによって差が分からない色や、人の目では区別のつかない物も多くあります。
ですので、実用的な色合いは限られてきますが、それでもなかなか覚えられるものではありません。

でも大丈夫です。世の中には便利なツールがたくさんあります。
例えばこちらの「HTMLカラーコード　ページ」では直感的に目で見て色合いを決めると、その色のカラーコードが表示されます。
PhotoshopやFireworks、Illustratorなどのデザインソフトにも、カラーコードを表示される欄が設けてあります。
よく使う色のカラーコードを数個覚えておいて、微妙な色合いを出したい時にこれらの機能を活用するようにすると、とても便利で簡単に色指定ができます。

実際にCSSを使って色を付けよう

文字に色を付けるには

文字に色を付けるには、色を付けたい文字を囲むHTML要素にCSSを書き込む必要があります。
例えばこのような感じにコードを書きます。

色を付けるにはcolorを使います。
こうしてあげることで、一行目は赤、二行目は黒の色が付きます。
二行目について、色をカラーコードを使って指定していませんね？
文字の色は初期値では黒となるので、黒い文字を使う場合には、あえて指定する必要はありません。

また一行だけでなく、文章中の一部に色を付けたい場合にはこのようになります。

このように、色を付けたい部分をHTML要素で囲んで、その要素に対してCSSを書き込みます。
今回はspan要素を使いましたが、場合によってはstrong要素が適任の場合もあります。どの要素を使うかは、HTMLの文法を確認しながら適したものを使うようにしてください。

背景に色を付けるには

背景に色を付ける場合にも、文字の時と同じく色を付けたい部分を囲むHTML要素にCSSを書き込みます。
例えばこのような感じです。

背景へ色を付けるにはbackground-colorを使います。
上記の例ではdiv要素全体が赤い背景色で囲まれます。
※ちなみに背景色の初期値は白です。

背景に画像を使うには

背景へ画像を入れたい場合、も背景色を付ける時と同じく、背景写真を入れたい部分を囲むHTML要素にCSSを書き込みます。
例えばこのような感じです。

背景へ画像を入れるにはbackgroundを使います。
url();の中に、入れたい画像ファイル名を書き込むことで、入れる画像を指定します。

まとめ

・HTMLカラーコードを使って、詳細な色を指定する
・文字色を付ける場合は、色を付けたい部分を囲む要素に「color」で色指定をする
・背景色を付ける場合は、背景色を付けたい部分を囲む要素に「background-color」で色指定をする
・背景へ画像を入れる場合は、背景画像を入れたい部分を囲む要素に「background:url();」で画像指定をする