文字の色を指定する

body {
	font-size: 0.9em;
	color: #333333;
}

ここで出てきた新しいことは二つですね。
順番に消化していきましょう。

二つ以上の効果を指定したい場合。
このように、改行&インデントをつけるのが一般的です。
(※インデントとは、文字の始まる位置をずらすこと。キーボードのTABキーでできます。)

もちろん、そのまま書き足すことも可能です。

body {font-size: 0.9em; color: #333333; }

このくらいならまだいいですが、

h3 {width: 100%;height: 25px;border-bottom: 2px #669966 solid;border-left: 5px #669966 solid;
margin: 0 0 20px 20px;padding: 3px 0 0 5px;}

までなってくると、さすがに見難いですね。

なので、改行&インデントを駆使して、後で見返しやすいコードにしましょう。

それと二つ目。

color: #333333;

この、「#333333;」って何?ということです。

これは、color:となっているから分かるかもしれませんが、色を表します。
#333333;だと、黒に近い灰色になります。

これは、33/33/33とわかれており、順に、赤/緑/青を表しています。
このように、赤(Red)、緑(Green)、青(Blue)の3色で色を表すことをRGBと言います。(この三色は、光の三原色ですね。)

また、それぞれの色ごとに、00~FFまで16進数で表されています。

なので、赤は#FF0000、緑は#00FF00、青は#0000FFといった感じです。
紫は赤+青なので#FF00FF。黒は、光がないので、#000000。逆に白は#FFFFFF。
※このアルファベットは大文字(#FFFFFF)でも小文字(#ffffff)でも構いません。

また、

color: #FF0000;
と書いても

color: red;
同じように表示されます。

・・・と理屈で説明してもわかりにくいと思うので、
実際に例をみてみましょう。このサイト、ウェブサイト用に色々な色が載っています。
しかも、種類ごとに色がわけられているので、大変使いやすい、夢のようなサイトです(笑)

原色大辞典
http://www.colordic.org/

今は、このサイトを見て「こんなに色があるんだー」と思う程度で良いですが、ウェブデザインをするようになってからは、よくお世話になると思うので、お気に入りに追加しておくことをお勧めします。

今はとりあえず、色はredのように名前で表すことも出来るし、#FF0000のようにRGBという方法で表すことも出来る、という程度の理解で十分OKです。

それでは、引き続き、いきます。


関連記事

  1. リストを作る

  2. 入門を終えたあなたがプロ並みのウェブデザインを構築できるあらゆる理由

  3. 答え合わせ

  4. 今までにやったことを用いて、見出しを装飾する

  5. コンテンツ部分をデザインする

  6. 骨格を作る言語HTML

お手本ナビの無料HPデザイン

ランダムピックアップ